简体   繁体   中英

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:

在此处输入图片说明

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:

在此处输入图片说明

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM