WPF ListBox Выбор Цвета - PullRequest
Новая
       22

WPF ListBox Выбор Цвета

14 голосов
/ 27 апреля 2009

Извините, если раньше об этом спрашивали, но я не смог найти решение того, что я ищу, в связанных вопросах или в Google.

В моем приложении я пытаюсь воссоздать диалоговое окно Words New Document, в списке слева от элементов и справа значок с текстом под ним. В Word он имеет оранжевый градиент при наведении курсора и более темный градиент при выборе элемента. У меня большая часть этого воссоздана, за исключением изменения цвета фона после выбора элемента. Вот код, который я использую для создания этого: 

    <ListView Margin="236,34,17,144" Name="listView1" HorizontalContentAlignment="Stretch">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid  Columns="5" IsItemsHost="True" VerticalAlignment="Top" >
                </UniformGrid>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate >
                <StackPanel HorizontalAlignment="Center" Width="auto">
                    <Image Source="images/document32.png" HorizontalAlignment="Center"/>
                    <TextBlock Text="{Binding}" HorizontalAlignment="Center" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}"  >                 
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Foreground" Value="Yellow" />
                        <Setter Property="Background" Value="Orange" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Foreground" Value="Black" />
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="1,0">
                                    <GradientStop Color="#d3e7ff" Offset="0.986"/>
                                    <GradientStop Color="#b0d2fc" Offset="0.5"/>
                                    <GradientStop Color="#8ec1ff" Offset="0.51"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>

                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

Так что это создает вид, который я собираюсь сделать, наводит указатель мыши, и когда я выбираю элемент в списке, он меняет текст шрифта на Желтый, но отказывается менять фон с синего на оранжевый по умолчанию и в идеале это был бы другой градиент в любом случае, а не залитый цвет. Спасибо за любую помощь.

1 Ответ

31 голосов
/ 27 апреля 2009

Есть несколько хаков, которые вы можете сделать, например, переопределить системный цветовой ключ, но, скорее всего, вам потребуется новый шаблон для достижения этой цели. Вот довольно симпатичный, который я собрал: 

<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Margin" Value="1,2,1,1"/>
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="{StaticResource NormalItemBackground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Grid>
                    <Border Background="{TemplateBinding Background}" />
                    <Border Background="#BEFFFFFF" Margin="3,1">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Border Margin="2,1,2,0" Grid.Row="0" Background="#57FFFFFF" />
                        </Grid>
                    </Border>
                    <ContentPresenter Margin="8,5" />
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True" />
                            <Condition Property="IsSelected" Value="False"/> 
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="{StaticResource HotItemBackground}" />
                    </MultiTrigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="{StaticResource SelectedItemBackground}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="ItemContainerStyle" Value="{DynamicResource ListboxItemStyle}" />
    <Setter Property="Margin" Value="3,3,2,1" />
</Style>
...