CODEWITHSUNDEEP
windows-phone-7data-bindingwidthlistboxitemsitemtemplateselector
user2216473
user2216473

Reputation: 11

Windows phone Grid Stretch Width in Template selector

Hi Everyone this is my first question so, I'll try to be really explicit: I have a ListBox with a Style and Template to make it a two column style view.

This is the Template for the ListBoxItem:

<DataTemplate x:Key="ItemDataTemplate">
        <Grid Height="29">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".3*" />
                <ColumnDefinition Width=".7*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Name="txtBind1" Text="{Binding Codigo}"/>
            <TextBlock Grid.Column="1" Name="txtBind2" Text="{Binding Descripcion}"/>
        </Grid>            
    </DataTemplate>

<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ListBoxStyle" TargetType="ListBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ScrollViewer>
                        <StackPanel VerticalAlignment="Top">
                            <Grid Height="30" Background="Gray">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.30*"/>
                                    <ColumnDefinition Width="0.70*" />
                                </Grid.ColumnDefinitions>
                                <Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
                                    <TextBlock Grid.Column="0" Text="{Binding CriterioActual.Descripcion}"/>
                                </Border>
                                <Border Grid.Column="1" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
                                    <TextBlock Grid.Column="1" Text="Descripción"/>
                                </Border>
                            </Grid>
                            <ItemsPresenter/>
                        </StackPanel>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And this is the ListBox:

<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
                Style="{StaticResource ListBoxStyle}"
                ItemTemplate="{StaticResource ItemDataTemplate}"
                ItemContainerStyle="{StaticResource ListboxStretchStyle}"
                ItemsSource="{Binding Articulos}">
            </ListBox>

This is the Result:

enter image description here

At this point, everything is fine, so I implemented a TemplateSelector to change the template of the ListBoxItem depending of SelectedItem of a ListBox. So I put the same template into a TemplateSelector but the Grid's Width is not Stretching.

Template Selector:

<DataTemplate x:Key="MultiTemplate">
        <Views:ArticulosTemplateSelector Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">
            <Views:ArticulosTemplateSelector.FiltroCodigo>
                <DataTemplate>
                    <Grid Height="29" Background="Gray" HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=".3*" />
                            <ColumnDefinition Width=".7*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Name="txtBind1" HorizontalAlignment="Stretch" Text="{Binding Codigo}"/>
                        <TextBlock Grid.Column="1" Name="txtBind2" HorizontalAlignment="Stretch" Text="{Binding Descripcion}"/>
                    </Grid>
                </DataTemplate>
            </Views:ArticulosTemplateSelector.FiltroCodigo>
</DataTemplate>

This is the Updated ListBox:

<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
                Style="{StaticResource ListBoxStyle}"
                ItemTemplate="{StaticResource MultiTemplate}"
                ItemContainerStyle="{StaticResource ListboxStretchStyle}"
                ItemsSource="{Binding Articulos}">
            </ListBox>

The Final Result:

enter image description here

The Grid is not stretching, If anyone can please help me I'll apreciate.

Upvotes: 0

Views: 1490

Answers (2)

superfrallan
superfrallan

Reputation: 162

I got problems with setting Listbox TemplateSelector to span 100%. My solution to this, was to replace Listbox with LongListSelector.

Upvotes: 0

user2216473
user2216473

Reputation: 11

The Template Selector has its own Width, so is important to stretch the Selector to allow the Grids to expand its size:

<Views:ArticulosTemplateSelector HorizontalContentAlignment="Stretch" Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">

Note the principal change: 

HorizontalContentAlignment="Stretch"

Regards

Upvotes: 1

Related Questions