Добрый день, господа.

Вопрос о том какой подход правильно применять.

Опишу конкретный пример.

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

<Button Click="On_blablaClick">
  <Image Source="blablaImage" Stretch="None" />
</Button>

Теперь хочется, чтобы вокруг картинок был бордер, одинаковый для обеих кнопок, и при MouseOver менялся фон и картинка — то есть понадобятся и триггеры.

Вот как такие вещи делаются по фен-шуй?

ControlTemplate — не поддерживают "наследования".
Стиль — на кого его навешивать и какое свойство менять чтобы обрамить картинку бордером?
Создать свой элемент управления и использовать его?


вобщем поделитесь, пожалуйста, best practice.


Ed.ward

Здравствуйте, Ed.ward, Вы писали:
EW>вобщем поделитесь, пожалуйста, best practice.

Как то вот так или так

Здравствуйте, skodnik, Вы писали:

S>Как то вот так или так

Хорошо, пойдём от обратного, вот что у меня получилось:

Это стиль, определён в ресурсах

<Style x:Key="CaptionControlButton" TargetType="ContentControl">
        <Setter Property="Template" >
          <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
              <Border x:Name="ButtonBorder" Width="24" Height="24" BorderBrush="#d3d4d5" BorderThickness="1" CornerRadius="3">
                <ContentPresenter />
              </Border>

              <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Setter TargetName="ButtonBorder" Property="BorderBrush" Value="#95b4ed" />
                  <Setter TargetName="ButtonBorder" Property="Background">
                    <Setter.Value>
                      <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                        <GradientStop Color="#f2f7ff" Offset="0" />
                        <GradientStop Color="#cfdfed" Offset="1" />
                      </LinearGradientBrush>
                    </Setter.Value>
                  </Setter>
                </Trigger>
              </ControlTemplate.Triggers>

            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

Это две кнопки, по MouseOver меняется картинка и фон. У второй кнопки картинка еще меняется в зависимости от состояния IsChecked

Вот это нормально, или по другому как-то принято добиваться такого результата?

<Button Click="CloseControl_Click" >

  <Button.Resources>
    <Image x:Key="Close" Source="Images/close.png" Stretch="None" />
    <Image x:Key="CloseHover" Source="Images/close_hover.png" Stretch="None" />
  </Button.Resources>

  <Button.Style>
    <Style BasedOn="{StaticResource CaptionControlButton}" TargetType="ContentControl">
      <Setter Property="Content" Value="{StaticResource Close}" />
        <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Content" Value="{StaticResource CloseHover}" />
          </Trigger>
        </Style.Triggers>
    </Style>
  </Button.Style>
</Button>

<ToggleButton>

  <ToggleButton.Resources>
    <Image x:Key="Pin" Source="Images/pin.png" Stretch="None" />
    <Image x:Key="PinHover" Source="Images/pin_hover.png" Stretch="None" />
    <Image x:Key="PinOn" Source="Images/pin_on.png" Stretch="None" />
    <Image x:Key="PinOnHover" Source="Images/pin_on_hover.png" Stretch="None" />
  </ToggleButton.Resources>

  <ToggleButton.Style>
    <Style BasedOn="{StaticResource CaptionControlButton}" TargetType="ToggleButton">
      <Setter Property="Content" Value="{StaticResource Pin}" />
                
      <Style.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="True" />
            <Condition Property="IsMouseOver" Value="True" />
          </MultiTrigger.Conditions>
          <Setter Property="Content" Value="{StaticResource PinOnHover}" />
        </MultiTrigger>

        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="True" />
            <Condition Property="IsMouseOver" Value="False" />
          </MultiTrigger.Conditions>
          <Setter Property="Content" Value="{StaticResource PinOn}" />
        </MultiTrigger>

        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="False" />
            <Condition Property="IsMouseOver" Value="False" />
          </MultiTrigger.Conditions>
          <Setter Property="Content" Value="{StaticResource Pin}" />
         </MultiTrigger>

        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="False" />
            <Condition Property="IsMouseOver" Value="True" />
          </MultiTrigger.Conditions>
          <Setter Property="Content" Value="{StaticResource PinHover}" />
       </MultiTrigger>

   </Style.Triggers>
 </Style>
</ToggleButton.Style>
</ToggleButton>

спасибо

Ed.ward