【问题标题】:Custom List Box item style自定义列表框项样式
【发布时间】:2014-02-20 22:27:58
【问题描述】:

我的风格如下:

<!-- ListBox ItemTemplate style. -->
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseLeave">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </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>
                            <ContentControl x:Name="ContentContainer" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            Content="{TemplateBinding Content}" 
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Margin="{TemplateBinding Padding}" 
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这是这样设置到我的列表框的:

    <ListBox Name="listBox" 
             HorizontalAlignment="Stretch"
             ItemContainerStyle="{StaticResource ListBoxItemStyle}"
             ItemTemplate="{StaticResource DefaultDataTemplate}"
     <ListBox.ItemsPanel>
             <ItemsPanelTemplate>
             </ItemsPanelTemplate>
     </ListBox.ItemsPanel>
     </ListBox>

现在ItemTemplate="{StaticResource DefaultDataTemplate}" 如下所示;

<DataTemplate x:Key="DefaultDataTemplate">
            <Border x:Name="ListItemBorder" 
                    Margin="0,2,0,0" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Background="{Binding Converter={StaticResource AnswerCellBackgroundConvertor}}">

///ITems

</Border>
        </DataTemplate>

如您所见,我也将DataTemplate Background 设置为默认值,因此我需要同时存在样式和转换器。

问题

当我单击列表框中的项目时,样式或边框位于顶部,如下图所示。如何设置为背景?

这里是图片;

我该如何解决这个问题?

【问题讨论】:

    标签: c# wpf windows-phone-8 listbox windows-phone


    【解决方案1】:

    我没有完全理解完整的问题,但如果您不希望 ListBoxItem 的内容与 ItemTemplate 完全相同,请将 ContentControl 替换为 ContentPresenter 。

    <ControlTemplate>
      <Grid>
    
         <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
         <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
         <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
         <ContentPresenter   />
      </Grid>
    

        <Grid>                
             <Border BorderBrush="#d2c2f9" BorderThickness="1">
                 <ContentPresenter   />
             </Border>
    
             <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>           
         </Grid>
    

    编辑 2:删除 itemtemplate 使用 Setter 设置 listboxitem 的背景以与您的转换器绑定,并且在您的模板中,您的 Grid 的 Backgorund 绑定到它的模板父背景。

       <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    
            <!-- this -->  
            <Setter Property="Background" Value="{Binding Path=Content,Converter={StaticResource AnswerCellBackgroundConvertor}}"/>
    
    
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                         <!-- and this Background--> 
                        <Grid x:Name="LayoutRoot" 
                              Background="{TemplateBinding Background}" 
                              HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseLeave">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </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>
    
                            <ContnerPresenter />
                            <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>  
    

    【讨论】:

    • 我尝试了您的解决方案,但还是一样,如图所示
    • 问题:当我点击该项目时,边框出现在顶部,但它应该作为背景,就像在图像中你可以看到文本看起来像它在边框颜色下方
    • 查看编辑,我将 contentpresenter 移到 Z 顺序上
    • 所以 ContentPresenter 应该在 Rectangle 标签下方?
    • 我按照你的建议做了,但是现在边框颜色 Fill="#d2c2f9" 根本没有被应用,请帮助我
    猜你喜欢
    • 2010-09-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-15
    • 1970-01-01
    • 1970-01-01
    • 2016-08-29
    • 1970-01-01
    相关资源
    最近更新 更多