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

时间:2009-09-28 22:06:25

标签: c# .net wpf user-interface

我有一个带有TextBlock的列表框绑定到一个字段,并且我设置了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 个答案:

答案 0 :(得分:1)

在我的测试中,更改ItemTemplate(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>