ユーザーコントロールのネストされた要素のプロパティを変更します。WPF/C＃

Question

私は、ベクトル画像を持つユーザーコントロールボタンを持っています。ボタンの上にマウスで別のベクターイメージの色（Fill = "{Binding IconColor、FallbackValue = 'Black'}"）を設定する必要があります。スタイルからアクセスする正しい方法を理解できないようです。

私はFill = "black"（バインディングなし）を試みましたが、まだ動作しません。私は何が欠けている、pls？代わりにOpacityMaskとRectangleの

<UserControl x:Class="ControlBarButton.UserControl1" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ControlBarButton" 
      mc:Ignorable="d" > 

<UserControl.Resources> 
     <ResourceDictionary> 
      <Path x:Key="SettingsIcon" Data="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" Fill="White" /> 

      <Style x:Key="i" TargetType="{x:Type Button}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="TheButton.ButtonImageRect.Fill" Value="Red" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </ResourceDictionary> 
    </UserControl.Resources> 

    <Button x:Name="TheButton" Margin="0" VerticalAlignment="Center" BorderBrush="#FFDDDDDD" HorizontalContentAlignment="Left"> 
     <StackPanel x:Name="ButtonStackPanel" Orientation="{Binding TheOrientation}" FlowDirection="LeftToRight" Margin="5, 5, 5, 5"> 
      <Rectangle x:Name="ButtonImageRect" Width="30" Height="30" Fill="{Binding IconColor, FallbackValue='Black'}"> 
       <Rectangle.OpacityMask> 
        <VisualBrush Stretch="Fill" Visual="{StaticResource SettingsIcon}"/> 
       </Rectangle.OpacityMask> 
      </Rectangle> 
      <Label x:Name="ButtonTextLabel" Content="{Binding TextLabel, RelativeSource={RelativeSource AncestorType={x:Type local:UserControl1}}, FallbackValue='-button-'}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="6" /> 
     </StackPanel> 
    </Button> 
</UserControl> 

Answer 1

、私はDataTriggerを経由してFillプロパティを設定し麦粒腫とパスを使用することをお勧めしたい：

<UserControl ...> 
    <UserControl.Resources> 
     <Geometry x:Key="SettingsIcon">M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z</Geometry> 
    </UserControl.Resources> 

    <Button VerticalAlignment="Center" BorderBrush="#FFDDDDDD" HorizontalContentAlignment="Left"> 
     <StackPanel Orientation="{Binding TheOrientation}" FlowDirection="LeftToRight" Margin="5, 5, 5, 5"> 
      <Path Data="{StaticResource SettingsIcon}" 
        Width="30" Height="30" Stretch="Uniform"> 
       <Path.Style> 
        <Style TargetType="Path"> 
         <Setter Property="Fill" Value="{Binding IconColor, FallbackValue=Black}"/> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=UserControl}}" 
             Value="True"> 
           <Setter Property="Fill" Value="Red"/> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Path.Style> 
      </Path> 
      <Label Content="{Binding TextLabel, RelativeSource={RelativeSource AncestorType=UserControl}, FallbackValue='-button-'}" 
        HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="6" /> 
     </StackPanel> 
    </Button> 
</UserControl>