Изменить цвет SVG при наведении (IsMouseOver)

Question

Есть много способов конвертировать SVG в XAML и использовать их на кнопках, но не понятно каким именно образом можно поменять цвет иконки при наведении на кнопку.

Пример конвертации:

<Geometry x:Key="myIcon">M1.5 8.13333C1.33431 ...</Geometry>
<Grid x:Key="myIcon2">
    <Viewbox Stretch="Uniform">
        <Path Data="M1.5 8.13333C1.33431 ..." Fill="Green"/>
    </Viewbox>
</Grid>

Пример использования:

<Button Style="{StaticResource btnStyle}">
    <Path Fill="Blue" Data="M1.5 8.13333C1.33431 ..." />
</Button>

<Button Style="{StaticResource btnStyle}" Content="{StaticResource myIcon}"/>

Стиль и триггер кнопки:

<Style TargetType="Button" x:Key="btnStyle">  
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!-- Как именно тут менять цвет -->
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Так, смотрите, в вашем стиле ContentPresenter является некой абстракцией, неким объектом, который знает, что там должен быть контент, не более того. Это как допустим стиральная машина, которая знает, что внутри у нее должно быть белье, но не знает какого типа оно, какой цвет и так далее, в теории ведь можно заставить ее это понимать, но каким трудом)

У вас по сути 2 варианта:

Привязать Path к цвету ее родителя:

Дописываем у стиля базовый цвет, который меняем триггером:

<Style TargetType="Button" x:Key="Button.TestStyle">
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent" >
                    <Viewbox>
                        <ContentPresenter/>
                    </Viewbox>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

У Path дописываем свойство Fill на нечто подобное:

Fill="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}"

Все, теперь Path должен менять цвет.

Поместить Path внутрь стиля. Это, по сути, более правильный вариант, ибо вы перестаете быть зависимы от контента, кнопка становиться самостоятельная.

 <Style TargetType="Button" x:Key="Button.TestStyle">
     <Setter Property="Background" Value="Blue"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border Background="Transparent" >
                     <Viewbox>
                         <Path Fill="{TemplateBinding Background}" 
                                 Data="M0.324,1.909c-0.429-0.429-0.429-1.143,0-1.587c0.444-0.429,1.143-0.429,1.587,0l9.523,9.539
                                 l9.539-9.539c0.429-0.429,1.143-0.429,1.571,0c0.444,0.444,0.444,1.159,0,1.587l-9.523,9.524l9.523,9.539
                                 c0.444,0.429,0.444,1.143,0,1.587c-0.429,0.429-1.143,0.429-1.571,0l-9.539-9.539l-9.523,9.539c-0.444,
                                 0.429-1.143,0.429-1.587,0 c-0.429-0.444-0.429-1.159,0-1.587l9.523-9.539L0.324,1.909z" />
                     </Viewbox>
                 </Border>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Background" Value="Red"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

Заметьте, что я чуть подправил ваш стиль, ContentPresenter обернут в Viewbox - это позволяет иконке занять всю площадь кнопки. Также был добавлен Background для Border - это сделано для того, чтоб триггер срабатывал, когда будет мышь наведется на кнопку, а не на конкретную SVG.

Вот, собственно, и основы. Дальше вы можете это развивать так, как вам угодно, например, вы можете эти страшные крякозябли SVG поместить в ресурсы (нечто на подобии <Geometry x:Key="Icon.Confirmed">...</Geometry>). А чтоб не править постоянно стили, можете Data привязать к Content кнопки ({TemplateBinding Content}) и при ее использовании уже писать <Button Style=".." Content="{StaticResouce Icon.Confirmed}" />, а чтоб эту портянку постоянно не повторять (не писать стили и так далее), можете сделать свой UserControl и будет у вас уже тогда <ctr:IconButton Icon="Confirmed" />. В общем, вариантов у вас куча, выбирайте свой и пробуйте реализовать)

БЛОГ НА HUSL

Изменить цвет SVG при наведении (IsMouseOver)

Ответы (1 шт):