Где я должен определять и устанавливать эти стили

Question

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

В настоящее время я пытаюсь как упростить XAML, эффективен рефакторинг повторяющихся элементов стиля в отдельный стиль и достижения отключенного искать изображения, если кнопки, в которых они расположены отключены.

В xaml ниже вы можете увидеть как стиль кнопки, который я создал, так и триггер данных для изображения. Теоретически оба применяются ко второй кнопке слева, но совершенно ясно, что они не существуют.

Я думаю, что основные определения стиля правильные, но может быть, они находятся в неправильном месте. Может ли кто-нибудь посоветовать, что я сейчас делаю неправильно.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:ViewToLearn.WpfControls"> 


    <Style TargetType="{x:Type Image}"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type UIElement}, AncestorLevel=1}, Path=IsEnabled}" 
         Value="False"> 
       <Setter Property="Opacity" 
         Value="0.2"></Setter> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 


    <Style TargetType="{x:Type Button}"> 
     <Setter Property="BorderBrush" 
       Value="Transparent" /> 
     <Setter Property="Background" 
       Value="Transparent" /> 
     <Setter Property="BorderThickness" 
       Value="0" /> 
     <Setter Property="Margin" 
       Value="4" /> 
    </Style> 

    <Style TargetType="{x:Type local:VtlDataNavigator}"> 


     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:VtlDataNavigator}"> 
        <StackPanel Orientation="Horizontal"> 
         <Button BorderBrush="Transparent" 
           Background="Transparent" 
           BorderThickness="0"> 
          <StackPanel Margin="4"> 
           <Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_first24.png" /> 
          </StackPanel> 
         </Button> <!-- This is the button that should be influenced by the style and trigger defined above, but clearly it isn't --> 
         <Button IsEnabled="False"> 
          <StackPanel Margin="4"> 
           <Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_previous24.png" /> 
          </StackPanel> 
         </Button> 
         <TextBox Text="{Binding Path=RecordIndex,RelativeSource={RelativeSource TemplatedParent}}" 
           VerticalAlignment="Center" 
           IsReadOnly="True" 
           BorderThickness="0" 
           Margin="4" /> 
         <TextBlock Text="of" 
            VerticalAlignment="Center" 
            Margin="4" /> 
         <TextBlock Text="{Binding Path=RecordCount,RelativeSource={RelativeSource TemplatedParent}}" 
            VerticalAlignment="Center" 
            Margin="4" /> 
         <Button BorderBrush="Transparent" 
           Background="Transparent" 
           BorderThickness="0"> 
          <StackPanel Margin="4"> 
           <Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_next24.png" /> 
          </StackPanel> 
         </Button> 

Answer 1

Ваша вторая кнопка имеет IsEnabled="false" Это делает разницу.

Но если вы хотите, чтобы фон был одинаковым для всех кнопок, включенных или нет, вы должны получить триггеры .

Лучший способ создания стиля и шаблона по умолчанию с помощью триггеров - поместить в окно кнопку фиктивного/тестового теста, щелкнуть правой кнопкой мыши по нему, отредактировать шаблон/отредактировать копию.
VS будет генерировать много кода. Вы увидите в „полный“ шаблоне»кнопки + триггера

Внутри есть триггер для других вида при отключении:.

<Setter Property="Template" > 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ButtonBase}"> 
      <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> 
       <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
      </Border> 
      <!-- ... --> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/> 
        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/> 
        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

Это тот шаблон, который можно взять вдохновение обновить свой стиль (без триггера, когда отключено):

<Style TargetType="{x:Type Button}"> 
    <Setter Property="BorderBrush" 
     Value="Transparent" /> 
    <Setter Property="Background" 
     Value="Transparent" /> 
    <Setter Property="BorderThickness" 
     Value="0" /> 
    <Setter Property="Margin" 
     Value="4" /> 
    <Setter Property="Template" > 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ButtonBase}"> 
       <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> 
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <!-- no trigger int he template --> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Примечание относительно вашего кода, потому что вы, кажется, хотите узнать:

1. Не нужно установить фон, BorderThickness, BorderBrush для каждой кнопки, это уже сделано в вашем Button стиле
2. StackPanel вокруг каждого Image то же самое и могут быть помещены внутри шаблона вокруг ContentPresenter тега
3. Если VtlDataNavigator является Usercontrol, вы можете поместить весь контент <ControlTemplate TargetType="{x:Type local:VtlDataNavigator}"> в тег <UserControl>.
   Это делает управление более многоразовым (не должно предоставлять шаблон в каждом окне для управления)

С уважением