설정 버튼

Question

이 내 실제 버튼 스타일 :

<Style x:Key="CategoryButtonStyle" TargetType="{x:Type Button}"> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid x:Name="grid"> 
        <Path x:Name="TabPath" StrokeThickness="2" 
          Margin="{Binding ElementName=buttonContent, Converter={x:Static c:ContentToMarginConverter.Value}}" 
          Stroke="{StaticResource BorderBrush1}" 
          Fill="{StaticResource TabItemPathBrush}"> 
         <Path.Data> 
          <PathGeometry> 
           <PathFigure IsClosed="False" StartPoint="1,0" 
              Segments="{Binding ElementName=buttonContent, Converter={x:Static c:ContentToPathConverter.Value}}"> 
           </PathFigure> 
          </PathGeometry> 
         </Path.Data> 
         <Path.LayoutTransform> 
          <!-- For some reason --> 
          <ScaleTransform ScaleY="-1"/> 
         </Path.LayoutTransform> 
        </Path> 
        <Rectangle x:Name="TabItemTopBorder" Height="2" Visibility="Visible" 
           VerticalAlignment="Bottom" Fill="{StaticResource BorderBrush1}" 
           Margin="{Binding ElementName=TabPath, Path=Margin}" /> 
        <ContentPresenter x:Name="buttonContent" Margin="10,2,10,2" VerticalAlignment="Center" 
             TextElement.Foreground="{StaticResource ForegroundBrush}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter Property="Fill" TargetName="TabPath"> 
          <Setter.Value> 
           <SolidColorBrush Color="#FFe4f6fa"/> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="BitmapEffect"> 
          <Setter.Value> 
           <DropShadowBitmapEffect Direction="302" Opacity="0.4" 
                 ShadowDepth="2" Softness="0.5"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Opacity" TargetName="grid" Value="0.25"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

와 내가 버튼을 누를 때처럼 보이는 선택된 상태로 버튼을 설정할 수 코드를 추가해야합니다. VisualStateManager 사용에 대해 생각하고 있었지만 좋은 방법인지 확실하지 않습니다. 어떻게 할 수 있습니까? 저는 다음과 같이 시작했습니다 :

<VisualStateManager.VisualStateGroups> 
    <VisualState x:Name="Normal" /> 
    <VisualState x:Name="Selected"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabPath" 
            Storyboard.TargetProperty="Fill"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="#FFe4f6fa" /> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
</VisualStateManager.VisualStateGroups> 

하지만 작동하지 않습니다. 스토리 보드에서 무엇을 사용해야할지 모르겠습니다.

편집 - 거의 작업 :

<VisualState x:Name="Selected"> 
    <Storyboard> 
     <ColorAnimation Storyboard.TargetName="TabPath" Storyboard.TargetProperty="Fill.(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFe4f6fa" Duration="0:0:0" /> 
     <ColorAnimation Storyboard.TargetName="TabPath" Storyboard.TargetProperty="Fill.(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFa9cde7" Duration="0:0:0" />    
     </Storyboard> 
</VisualState> 

것은 내 브러쉬 추가하는 것을 잊지 : 개인적으로

<LinearGradientBrush x:Key="TabItemSelectedPathBrush" StartPoint="0,0" EndPoint="0,1"> 
    <GradientStop Color="#FFe4f6fa" Offset="0"/> 
    <GradientStop Color="#FFa9cde7" Offset="1"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="TabItemPathBrush" StartPoint="0,0" EndPoint="0,1"> 
    <GradientStop Color="#FFa9cde7" Offset="0"/> 
    <GradientStop Color="#FF3164a5" Offset="1"/> 
</LinearGradientBrush> 

Answer 1

VisualStates은 ControlTemplate의 루트 요소에 선언해야합니다. 다음 코드를 사용하면

 <Grid> 
    <Grid.Resources> 
     <SolidColorBrush x:Key="FillBrush" Color="Magenta" /> 
     <Color x:Key="StateBrush" >#a3bfb1</Color> 
     <Style x:Key="CategoryButtonStyle" TargetType="{x:Type Button}"> 
      <Setter Property="HorizontalContentAlignment" Value="Center"/> 
      <Setter Property="VerticalContentAlignment" Value="Center"/> 

      <Setter Property="Padding" Value="1"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Border Background="Green" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" x:Name="root"> 

          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Selected"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabPath" 
           Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StateBrush}"> 

               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid x:Name="grid"> 
           <Path x:Name="TabPath" StrokeThickness="1" 

         Stroke="Blue" 
         Fill="{StaticResource FillBrush}" Canvas.Left="16.75" 
      Canvas.Top="14" 
      Width="50" 
      Height="40" 
      Data="F1 M 26.75,24L 16.75,34L 23.5,34L 34,24L 23.5,14L 16.75,14L 26.75,24 Z "> 
            <Path.LayoutTransform> 
             <!-- For some reason --> 
             <ScaleTransform ScaleY="-1"/> 
            </Path.LayoutTransform> 
           </Path> 
           <ContentPresenter x:Name="buttonContent" Margin="10,2,10,2" VerticalAlignment="Center" 
            TextElement.Foreground="{TemplateBinding Foreground}"/> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

    </Grid.Resources> 
    <Button x:Name="test" Style="{StaticResource CategoryButtonStyle}" Content="Test" VerticalAlignment="Center" Width="200px" BorderBrush="#888" BorderThickness="1px"/> 
</Grid> 

이 코드는 의도 한대로 상태가 변경됩니다.

VisualStateManager.GoToState (test, "TestState", true);

필요에 따라 템플릿을 변경합니다,하지만 당신은 (이 예에서는 Border)이 ControlTemplate의 루트 요소에

편집을 VisualState 선언을 넣어 있는지 확인하십시오 를 내가 선택한 업데이트되었습니다 올바른 속성 경로가있는 VisualState의 전환 선언.그것이 당신의 문제를 해결하는지 알려주세요.

Answer 2

나는 그런 작업 혼합을 사용, 그것은 정말 WPF 개발을위한 비주얼 스튜디오의 동반자 응용 프로그램.

몇 번의 클릭만으로 아무 것도 사용할 수 없으며 생성 된 XAML을 프로젝트에 복사 할 수 없습니다.

버튼 스타일

트리거

을

여기 있는 모든 버튼 상태 편집

,

혼합은

주 :-) 일반 버터를 선호하지 않는 버터 빵처럼, WPF는 VS2012과 WPF 프로젝트 작업에있는 경우, Microsoft Blend + SketchFlow Preview for Visual Studio 2012이 버전인지, 그것으로 더 맛입니다 그러면 WPF 프로젝트를 편집 할 수 있습니다. VS2012와 함께 번들로 제공되는 버전은 Windows Store 앱 전용입니다.

Answer 3

동일한 스타일과 템플릿을 사용하는 ToggleButton을 사용하십시오.

스타일 (원래 질문에있는 스타일)에서 스타일 및 제어 템플릿의 TargetType을 ButtonBase으로 변경하십시오.

<Trigger Property="ToggleButton.IsChecked" Value="True"> 
    <Setter Property="Fill" TargetName="TabPath"> 
     <Setter.Value> 
      <SolidColorBrush Color="#FFe4f6fa"/> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="BitmapEffect"> 
     <Setter.Value> 
      <DropShadowBitmapEffect Direction="302" Opacity="0.4" ShadowDepth="2" Softness="0.5"/> 
     </Setter.Value> 
    </Setter> 
</Trigger> 

지금 당신은 버튼, 토글 버튼, 라디오 버튼이 스타일을 사용하고 상자를 확인할 수 있습니다

제어에서 템플릿이 트리거를 추가 트리거합니다.