Изменить список выбранного цвета - PullRequest
Новая
       4

Изменить список выбранного цвета

3 голосов
/ 02 апреля 2011

Я хочу изменить выбранный фон и заставить его отображать градиент с закругленными углами.Я искал в Google и обнаружил, что некоторые люди меняют выбранный цвет, переопределяя цвет по умолчанию.Есть ли способ, которым я могу сделать это?Я думал, есть ли способ отобразить рамку с закругленными углами в качестве фона при выборе элемента?

Ответы [ 2 ]

8 голосов
/ 02 апреля 2011

Вот стиль по умолчанию для ListBoxItem (это то, что мы хотим изменить).Этот стиль можно «восстановить», если вы используете Expression Blend 4, щелкнув правой кнопкой мыши элемент списка в элементе управления «Объекты и временные шкалы». 

<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="2,0,0,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                Background="{TemplateBinding Background}" 
                Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"
                >
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Давайте выделим некоторые важные части, чтобы вы научились делать это самостоятельно. 

<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">

Это начало объявления стиля.Мы дали ему ax: Key, чтобы его можно было извлечь из словаря ресурсов, и мы установили TargetType для ListBoxItem.

Теперь мы хотим найти ту часть стиля, которую хотим изменить.В этом случае мы собираемся пойти вниз и найти раздел стиля, который является MultiTrigger на новом ControlTemplate. 

<MultiTrigger>
<MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="true"/>
        <Condition Property="Selector.IsSelectionActive" Value="false"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>

Этот MultiTrigger нуждается в 2 свойствах, чтобы соответствовать значениям, чтобы бытьактивируется.Этот триггер при активации изменит цвет фона на Value = "...", а цвет переднего плана на Value = "...".Чтобы получить градиентный фон, нам нужно изменить значение в значении фона = "..." на другую кисть.Давайте создадим быструю маленькую градиентную кисть (тоже очень красочную!) 

<LinearGradientBrush x:Key="GradientBrush" StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>

Итак, теперь давайте применим это к фону этого триггера. 

<Setter Property="Background" TargetName="Bd" Value="{StaticResource GradientBrush}"/>

Теперь, когда этот стильприменяется к ListBoxItem, и ListBoxItem IsSelected = True (и Selector.IsSelectionActive = false) вы увидите градиентный фон на элементе listbox.

Теперь вы также хотели закругленные углы.Если мы подойдем к вершине ControlTemplate, мы увидим объявление границы.

<Border x:Name="Bd"

В этом объявлении мы хотим добавить атрибут CornerRadius для округления углов в ListBoxItem. 

CornerRadius="5"

И теперь вы должны иметь возможность создавать радиус углалинейный градиентный фон listboxitem.Я надеюсь, что вы сможете продолжить отсюда самостоятельно.

1 голос
/ 02 апреля 2011

У меня есть пример в моем блоге здесь . Он переопределяет шаблон ControlTemplate и используемые им цвета.

...