Настройка шаблона ListBox необходима для горизонтального растяжения элементов списка

Question

Я пытаюсь использовать DataTemplate для ListBox.ItemTemplate для простого списка TODO.

Шаблон для каждого ListBoxItem является сеткой, и я хочу, чтобы содержимое моего второго столбца растягивало оставшуюся ширину.из списка.Кажется, никакое количество HorizontalAlignment="Stretch" и т. Д. Не поможет, и я думаю, что мне нужно изменить шаблон.Я посмотрел на ListBox извлеченный шаблон Xaml, но не вижу, что мне нужно изменить.

В этом примере XAML вы можете увидеть зеленую рамку, которая должна растянуть оставшуюся ширину элемента списка, ноне.

В XamlPad / WPF этот код на самом деле отображает как ожидалось.
В Silverlight коробка не растягивается.

 <ListBox Width="360" Height="150" HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>
                            <Grid  Margin="3,0,3,0" HorizontalAlignment="Stretch">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
                                <Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
                                    <TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold"  />
                                </Border>
                            </Grid>
                </DataTemplate>
         </ListBox.ItemTemplate>

            <s:String>Take out trash</s:String>
            <s:String>Clean car</s:String>
            <s:String>Finish TODO list program</s:String>
            <s:String>Sleep</s:String>

        </ListBox>

Answer 1

Вы можете достичь того, что вы хотите, определив ItemContainerStyle для вашего ListBox:

    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Padding" Value="3"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                          <Grid  HorizontalAlignment="Stretch" Margin="3,0,3,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
                        <Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
                            <TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold"  />
                        </Border>
                    </Grid>
                        <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                        <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>

                        <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

А затем используйте этот стиль в вашем списке:

 <ListBox Width="360" Height="150" x:Name="lb" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" />

В том, что вы пытаетесь сделать, проблема в том, что ширина вашей сетки не эквивалентна элементу списка.

Answer 2

Проблема в том, что Grid находится внутри DataTemplate. Если вы увеличите его размер, вы увидите, что граница увеличивается с ним.

Answer 3

Первое ColumnDefinition определено как Auto, но свойство Width первого TextBlock (URGENT) не назначено.Что происходит, когда вы присваиваете значение или изменяете ColumnDefinition.Width на фиксированное значение?