代码之家 › 专栏 › 技术社区 › Nate CSS Guy

将矩形添加到WPF列表框,并使该矩形的填充颜色交替

user-interface wpf .net c#

Nate CSS Guy · 技术社区 · 15 年前

我有一个列表框,文本块绑定到一个字段,并且我设置了alternationCount=“2”,这对于更改项控件的背景色非常有用;但是,我无法使用矩形获得我想要的效果…我正在尝试对每个列表框项都有圆角效果。

编辑: XAML

<DataTemplate x:Key="TaskListTemplate">
    <Grid Height="276" Width="Auto">
        <Rectangle Fill="Gray" Stroke="Black" RadiusX="8" RadiusY="8" Margin="0"/>
        <TextBox x:Name="txtDescription" Text="{Binding Path=Des}" />
        <TextBox x:Name="txtComments" Text="{Binding Path=Com}"/>
        <Label Content="{Binding Path=Title}">
    </Grid>
</DataTemplate>

<ListBox Margin="8,37,0,6" 
    ItemContainerStyle="{DynamicResource ListBoxItemStyle}" 
    AlternationCount="2"
    ItemTemplate="{DynamicResource TaskListTemplate}"/>

<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Tahoma" />
        <Setter Property="Background" Value="#006C3B3B"/>
        <Style.Resources>
          <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF533F70"/>
          <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF533F70"/>
          <Storyboard x:Key="MouseOverStoryBoard">
            <ColorAnimationUsingKeyFrames AutoReverse="True" BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF48F21"/>
                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF4A475C"/>
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </Style.Resources>
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="#FFA2BAD4"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="#FF7395B9"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource MouseOverStoryBoard}"/>
                </Trigger.EnterActions>
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Background" Value="#FFF48F21"/>
                <Setter Property="FontStyle" Value="Normal"/>
            </Trigger>
        </Style.Triggers>
    </Style>

1 回复 | 直到 15 年前

Simon D. 15 年前

在我的测试中,更改项模板(tasklisttemplate)没有任何效果。所以第一步是用另一种方式来做这件事,我选择了在ListBoxItemStyle中设置ContentTemplate,这很有效。此外,您还需要一些具有交替背景的圆角矩形: 我在修改代码时使用了一个边框,但是一个矩形也可以得到类似的结果。在这里,我认为关键是设置其他元素的背景是透明的,否则它们会隐藏你的矩形。只需在kaxaml中复制以下代码,看看它是什么样子的。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <DataTemplate x:Key="TaskListTemplate">
            <Border MinWidth="50" Height="70" Background="{TemplateBinding ListBoxItem.Background}" BorderBrush="Black" CornerRadius="8" Margin="0">
                <Grid Background="Transparent">
                    <TextBox x:Name="txtDescription" Text="{Binding Path=Des}" Background="Transparent"/>
                    <TextBox x:Name="txtComments" Text="{Binding Path=Com}" Background="Transparent"/>
                    <Label Content="{Binding Path=Title}" Background="Transparent"/>
                </Grid>
            </Border>
        </DataTemplate>
        <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="FontFamily" Value="Tahoma"/>
            <Setter Property="Background" Value="#006C3B3B"/>
            <Setter Property="ContentTemplate" Value="{DynamicResource TaskListTemplate}"/>
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF533F70"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF533F70"/>
                <Storyboard x:Key="MouseOverStoryBoard">
                    <ColorAnimationUsingKeyFrames AutoReverse="True" BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF48F21"/>
                        <SplineColorKeyFrame KeyTime="00:00:00.500" Value="#FF4A475C"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="#FFA2BAD4"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="#FF7395B9"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource MouseOverStoryBoard}"/>
                    </Trigger.EnterActions>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="Background" Value="#FFF48F21"/>
                    <Setter Property="FontStyle" Value="Normal"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Page.Resources>
    <Grid>
        <ListBox Margin="8,37,0,6" 
                 ItemContainerStyle="{DynamicResource ListBoxItemStyle}" 
                 AlternationCount="2">
            <ListBoxItem>Test1</ListBoxItem>
            <ListBoxItem>Test2</ListBoxItem>
            <ListBoxItem>Test3</ListBoxItem>
        </ListBox>
    </Grid>
</Page>