專注於標籤，文本塊和邊框

Question

我想創建一個帶圓形右上角和下角的平面按鈕。此按鈕需要在點擊和鼠標懸停後更改背景。

目前我標記看起來是這樣的：

<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> 

在觸發鼠標完美的作品，但我不能讓點擊觸發工作...我已經試過IsKeyboardFocusWithin和IsFocused但事與願違工作。

Answer 1

您可以創建Button樣式，然後只有您將IsPressed屬性。使用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

我認爲你應該使用ToggleButton，而不是普通的按鈕 -

<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>