Question

I have a listbox in which I render data using multiple datatemplates, and I use a datatemplate selector to route data to the appropriate template.

Each template has it’s own layout using a grid. The first column of every grid inside the template is a textblock and I want them aligned to left. The next item is another textblock which should be aligned towards the maximum width of the first textblock (something similar to a data entry form). I’m using Grid.IsSharedSizeScope for this, but not able to achieve this. Below is my code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      

<Page.Resources>

 <DataTemplate x:Key="DefaultTemplate">
            <Border BorderThickness="1" CornerRadius="3" BorderBrush="LightGray">
            <TextBlock Text="{Binding Name}"></TextBlock>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="ShortFieldTemplate">
            <Grid Grid.IsSharedSizeScope="True">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>  
                <TextBlock Text="Age:"  Grid.Column="0"></TextBlock>
                <TextBlock Text="{Binding Age}" Grid.Column="1"></TextBlock>
            </Grid>            
        </DataTemplate>
        <DataTemplate x:Key="LongFieldTemplate">
            <Grid Grid.IsSharedSizeScope="True">

                    <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                        <ColumnDefinition/>                        
                    </Grid.ColumnDefinitions>               
                <TextBlock Text="This should be the name:" Grid.Column="0"></TextBlock>
                <TextBlock Text="{Binding Name}" Grid.Column="1"></TextBlock>                
                </Grid>                      
        </DataTemplate>

        <GridSplitterTextTrim:MyFirstTemplateSelector x:Key="MyFirstTemplateSelector" 
                                                      DefaultDataTemplate="{StaticResource DefaultTemplate}"
                                                      ShortFieldDataTemplate="{StaticResource ShortFieldTemplate}"
                                                      LongFieldDataTemplate="{StaticResource LongFieldTemplate}"
                                                      />

</Page.Resources>

   <Grid x:Name="LayoutRoot" Grid.IsSharedSizeScope="True">

    <Grid Grid.Column="2" Background="Green" >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <ListBox ItemsSource="{Binding Items}" Grid.Row="0" Grid.Column="0" x:Name="listbox" ItemTemplateSelector="{StaticResource MyFirstTemplateSelector}">  
            </ListBox>
        </Grid>   
   </Grid>  
</Page>   

..and my object model

 public class ShortField : INotifyPropertyChanged
    {
        private string _name;
        public string Age
        {
            get { return _name; }
            set
            {
                _name = value;
                InvokePropertyChanged(new PropertyChangedEventArgs("Age"));
            }
        }

        private string _currentValue;
        public string CurrentValue
        {
            get { return _currentValue; }
            set
            {
                _currentValue = value;
                InvokePropertyChanged(new PropertyChangedEventArgs("CurrentValue"));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void InvokePropertyChanged(PropertyChangedEventArgs e)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, e);
        }

        public static List<ShortField> GetShortFields()
        {
            return new List<ShortField>()
                       {
                           new ShortField() {Age = "10"},
                           new ShortField() {Age = "21"},
                       };
        }
    }

How do I get this alignment right? I thought Grid.IsSharedScope should do the trick. Is that correct or is there any other way?

Thanks in advance,
-Mike

Answer 1

try to set

<ListBox Grid.IsSharedSizeScope="True"