Mise au point sur l'étiquette, TextBlock et la bordure

Question

Je souhaite créer un bouton plat avec des coins arrondis supérieurs et inférieurs droits. Ce bouton doit avoir l'arrière-plan changé sur cliqué et sur la souris.

mon Markup ressemble actuellement à ceci:

<Border x:Name="MyButton" Height="25" Margin="0,5,0,0" CornerRadius="0 5 5 0" BorderThickness="1" BorderBrush="Gray" Style="{StaticResource myStyle1}"> 
     <StackPanel Orientation="Horizontal" Margin="8,0,0,0"> 
      <Image Source="image.jpg" Height="20"/> 
      <TextBlock Text="My Button"/> <!-- Could also be a label if needs to be. --> 
     </StackPanel> 
    </Border> 

    <Style x:Key="myStyle1" TargetType="{x:Type Border}"> 
     <Setter Property="Background" Value="{StaticResource MainContentForegroundColor}"/> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Background" Value="Red" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

La souris sur la gâchette fonctionne parfaitement, mais je ne peux pas l'élément déclencheur de clic pour travailler ... Je l'ai essayé et IsKeyboardFocusWithinIsFocused mais il n'a pas travail.

Answer 1

Vous pouvez créer un style de bouton, alors seulement vous serez IsPressed Property. Voir le code ci-dessous en utilisant VSM.

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"> 
              <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF760D0D"/> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"> 
              <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF675A88"/> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="border" BorderBrush="#FF5A8876" BorderThickness="3" Background="#FFF4EDED"/> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 


<Button HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="180" Height="61" Content="Button"/> 

Answer 2

Je pense que vous devriez utiliser ToggleButton au lieu de bouton normal -

<ToggleButton 
    Background="Transparent"> 
    <ToggleButton.Template> 
     <ControlTemplate 
      TargetType="{x:Type ToggleButton}"> 
      <Border 
       x:Name="MyButton" 
       Height="25" 
       Margin="0,5,0,0" 
       CornerRadius="0 5 5 0" 
       BorderThickness="1" 
       BorderBrush="Gray"> 
       <StackPanel 
        Orientation="Horizontal" 
        Margin="8,0,0,0"> 
        <Image 
         Source="image.jpg" 
         Height="20" /> 
        <TextBlock 
         Text="My Button" /> 
        <!-- Could also be a label if needs to be. --> 
       </StackPanel> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger 
        Property="IsChecked" 
        Value="True"> 
        <Setter 
         Property="Background" 
         Value="Red" /> 
       </Trigger> 
       <Trigger 
        Property="IsMouseOver" 
        Value="True"> 
        <Setter 
         Property="Background" 
         Value="Red" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton>