【问题标题】:UWP - Customizing ListBoxItemStyle with Stackpanel ContentUWP - 使用 Stackpanel 内容自定义 ListBoxItemStyle
【发布时间】:2016-07-25 08:51:47
【问题描述】:

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

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

使用下面的 ListBox 示例,我只能在标准 ListBoxItemStyle 中设置 ContentPresenter 的样式,并且两个 TextBlock 一起更改。

<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>

【问题讨论】:

    标签: xaml listbox styles win-universal-app


    【解决方案1】:

    您必须编辑 ItemContainer 的样式。将 ContentPresenter 替换为 stackpanel 及其内容。但是我使用了 Binding 而不是 x:Bind。似乎无法在样式中使用 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>
    

    【讨论】:

    • 效果很好,感谢您解决了这个困惑。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-11
    • 1970-01-01
    • 2011-07-07
    • 2016-12-18
    • 2016-01-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多