¿Cómo puedo botones de estilo

Question

Mi diseñador UX me entregaron éstos, y no sé por dónde empezar a labrar mi aplicación WPF. Cualquier ayuda sería apreciada. Tal vez un ejemplo para uno que puedo extender para los otros dos.

Estos serían botones estándar en todos los demás aspectos, excepto en la pantalla visual. No creo que deba implementar un control personalizado.

Answer 1

La documentación de MSDN en Button Styles probablemente será de ayuda para usted. Da un ejemplo de una Plantilla de Botón de WPF que usted debería poder editar según sus requisitos. Puede poner el Xaml en Windows.Resources si el estilo solo se va a usar en ese formulario, o puede editar el archivo Application.xaml y colocar la información de estilo en la sección Application.Resources si se va a utilizar para todo solicitud.

---

Modificado por encima enlace estilo para darle un ejemplo:

<Application x:Class="Application" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
     <!--Control colors.--> 
     <Color x:Key="ControlNormalColor">#FFC0C0CE</Color> 
     <Color x:Key="ControlMouseOverColor">#FFAFA3B9</Color> 
     <Color x:Key="DisabledControlColor">#FFF2F2F2</Color> 
     <Color x:Key="DisabledForegroundColor">#FFBFBFBF</Color> 
     <Color x:Key="ControlPressedColor">#FF211AA9</Color> 

     <!-- FocusVisual --> 

     <Style x:Key="ButtonFocusVisual"> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Border> 
          <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" /> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <!-- Button --> 
     <Style TargetType="Button"> 
      <Setter Property="SnapsToDevicePixels" Value="true" /> 
      <Setter Property="OverridesDefaultStyle" Value="true" /> 
      <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" /> 
      <Setter Property="MinHeight" Value="29px" /> 
      <Setter Property="MinWidth" Value="103px" /> 
      <Setter Property="Foreground" Value="#FFFFFFFF" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border"> 
          <Border.Background> 
           <SolidColorBrush Color="{DynamicResource ControlNormalColor}" /> 
          </Border.Background> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.5" /> 
             <VisualTransition GeneratedDuration="0" To="Pressed" /> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
               Storyboard.TargetName="Border"> 
               <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
               Storyboard.TargetName="Border"> 
               <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
               Storyboard.TargetName="Border"> 
               <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" /> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
               Storyboard.TargetName="Border"> 
               <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter Margin="2" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          RecognizesAccessKey="True" /> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

    </Application.Resources> 
</Application> 

Answer 2

Use estilos para personalizar sus controles de la IU.

Consulte los siguientes enlaces para ver ejemplos:

http://wpftutorial.net/Styles.html

http://geekswithblogs.net/cskardon/archive/2008/06/20/roundedbutton-button-style-wpf.aspx

http://gregandora.wordpress.com/2011/02/06/wpf-minimal-button-styling/