UWP - 使用 Stackpanel 内容自定义 ListBoxItemStyle

Question

我正在为 UWP 中的 ListBoxItem 的样式概念而苦苦挣扎-XAML。

我想要实现的是一个 ListBox 的样式，其中的项目由两个 TextBlock 的 StackPanel 组成，例如改变PressedSelected 时两个 TextBlocks 的前景不同。

对于下面的 ListBox 示例，我只能在标准 ListBoxItemStyle 中设置 ContentPresenter 的样式，并且两个 TextBlocks 一起更改。

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="local:DataSet">
            <StackPanel>
                <TextBlock x:Name="number" Text="{x:Bind Number}"/>
                <TextBlock x:Name="name" Text="{x:Bind Name}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 1

您必须编辑 ItemContainer 的样式。用堆栈面板及其内容替换 ContentPresenter。但是我使用 Binding 而不是 x:Bind。在 style

里面好像不能用 x:Bind

<Style TargetType="ListBoxItem" x:Key="ListViewStyle">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Padding" Value="12,0,12,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="ContentBorder"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter1" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter1" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow" />
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter1" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow" />
                                                </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled"/>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BorderBackground"
                    IsHitTestVisible="False"
                    Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                    Opacity="0"
                    Control.IsTemplateFocusTarget="True"/>
                            <StackPanel  Background="Transparent"
              Margin="0,0,0,0">
                                <TextBlock x:Name="ContentPresenter" Text="{Binding Number}"/>
                                <TextBlock Grid.Column="1" x:Name="ContentPresenter1" Text="{Binding Name}"/>
                            </StackPanel>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



<ListBox  ItemContainerStyle="{StaticResource ListViewStyle}" x:Name="listview">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

UWP - 使用 Stackpanel 内容自定义 ListBoxItemStyle

UWP - Customizing ListBoxItemStyle with Stackpanel Content

xaml

styles

listbox

win-universal-app