WPF Button Styles

Question

Does anyone know how to create / add a WPF button that looks exactly like the IE7 back next buttons or the login button shown within this screenshot, http://www.winsupersite.com/showcase/whs_ctp_gallery_wrapper_02.asp?img=/images/showcase/whs_ctp_mgmt_08.jpg

 

Does such a button exist that can be added to an application?

 

Thanks

 

Answer 1

you can use blend, stylesnooper to look at styles for frame or page and get the style of the buttons

Answer 2

Hello, you can create a template for the button and import some images. Use triggers to set different images according to IsMouseOver :

         <ControlTemplate x:Key="myButton" TargetType="Button">

              <Image Source="image1.jpg" x:Name="img" />

              <ControlTemplate.Triggers>

                   <Trigger Property="IsMouseOver" Value="True">

                       <Setter TargetName="img" Property="Source" Value="image2.jpg" />

                   </Trigger>

              </ControlTemplate.Triggers>

         </ControlTemplate>

 

         <Button Template="{StaticResource myButton}" />

Answer 3

Do you have further information on using Stylesnooper to locate the styles for the right arrow button?  Thanks

Answer 4

you can get stylesnooper here http://blogs.msdn.com/llobo/archive/2006/07/17/Tool-to-Examine-WPF-control-styles.aspx

once you run the application select 'navigationwindow' from the dropdown

look for button template

 

Code Snippet

<Button>
      <Button.Template>
        <ControlTemplate TargetType="Button">
          <Grid Height="24" Width="24" Background="#00FFFFFF">
            <Ellipse Name="Circle" StrokeThickness="1">
              <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#FFFFFFFF" />
                    <GradientStop Offset="0.1" Color="#FFCCD4E9" />
                    <GradientStop Offset="0.47" Color="#FF4881D2" />
                    <GradientStop Offset="0.47" Color="#FF001A5A" />
                    <GradientStop Offset="0.7" Color="#FF007BD6" />
                    <GradientStop Offset="0.85" Color="#FF54DAFF" />
                    <GradientStop Offset="0.95" Color="#FF86FFFF" />
                    <GradientStop Offset="1" Color="#FFFFFFFF" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Ellipse.Fill>
              <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#FF6C90C4" />
                    <GradientStop Offset="0.5" Color="#FF315BB4" />
                    <GradientStop Offset="0.5" Color="#FF002091" />
                    <GradientStop Offset="1" Color="#FF08377C" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Ellipse.Stroke>
            </Ellipse>
            <Path  RenderTransformOrigin="0.5,0" Data="M0.37,7.69L5.74,14.2A1.5,1.5,0,1,0,10.26,12.27L8.42,10.42 14.9,10.39A1.5,1.5,0,1,0,14.92,5.87L8.44,5.9 10.31,4.03A1.5,1.5,0,1,0,5.79,1.77z" HorizontalAlignment="Center" Name="Arrow" VerticalAlignment="Center" StrokeThickness="0.75">
              <Path.Fill>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.5" Color="#FFFFFFFF" />
                    <GradientStop Offset="0.5" Color="#FFEEEEEE" />
                    <GradientStop Offset="1" Color="#FFB0B0B0" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Path.Fill>
              <Path.Stroke>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#FF8AB1FB" />
                    <GradientStop Offset="1" Color="#FF002874" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Path.Stroke>
            </Path>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsEnabled" Value="false">
              <Setter Property="Shape.Fill" TargetName="Circle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Offset="0" Color="#FFFFFFFF" />
                      <GradientStop Offset="0.5" Color="#FFEBEEF5" />
                      <GradientStop Offset="0.5" Color="#FFD8DDEB" />
                      <GradientStop Offset="1" Color="#FFDFE2F0" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
              <Setter Property="Shape.Stroke" TargetName="Circle">
                <Setter.Value>
                  <SolidColorBrush>#FFB5BACE</SolidColorBrush>
                </Setter.Value>
              </Setter>
              <Setter Property="Shape.Stroke" TargetName="Arrow">
                <Setter.Value>
                  <SolidColorBrush>#B0B5BACE</SolidColorBrush>
                </Setter.Value>
              </Setter>
              <Setter Property="Shape.Fill" TargetName="Arrow">
                <Setter.Value>
                  <SolidColorBrush>#D0FFFFFF</SolidColorBrush>
                </Setter.Value>
              </Setter>            
            </Trigger>
            <Trigger Property="UIElement.IsMouseOver" Value="true">
              <Setter Property="Shape.Fill" TargetName="Circle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Offset="0" Color="#FFFFFFFF" />
                      <GradientStop Offset="0.1" Color="#FFDFEDF9" />
                      <GradientStop Offset="0.47" Color="#FF3086E1" />
                      <GradientStop Offset="0.47" Color="#FF003B91" />
                      <GradientStop Offset="0.7" Color="#FF1793EF" />
                      <GradientStop Offset="0.85" Color="#FF5AD4FF" />
                      <GradientStop Offset="0.95" Color="#FFBDFFFF" />
                      <GradientStop Offset="1" Color="#FFFFFFFF" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
             
            </Trigger>
            <Trigger Property="ButtonBase.IsPressed" Value="True">
              <Setter Property="Shape.Fill" TargetName="Circle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Offset="0" Color="#FFC0D2F5" />
                      <GradientStop Offset="0.47" Color="#FF5E7A9C" />
                      <GradientStop Offset="0.47" Color="#FF00062D" />
                      <GradientStop Offset="0.7" Color="#FF005F9F" />
                      <GradientStop Offset="0.85" Color="#FF1FA4E2" />
                      <GradientStop Offset="0.95" Color="#FF61DAFF" />
                      <GradientStop Offset="1" Color="#FF48CFFF" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Button.Template>
    </Button>

 

Answer 5

Thank you so much Lee, I can see that Stylesnooper will be quite useful.