This code create a new roundedbutton for wpf application.

Its easy understand and customes button style. I want to create rounded button for in my application and style effect change when Button Enable and Disable time after that IsEnable time when i click the button that style change like a normal button.

Here i used in Gradient color also we can customes


<Button Command="Print" Name="butSinglePrint" Height="40" Width="40" Margin="6">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse 
                         StrokeThickness="2">
                        <Ellipse.Fill>
                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                        <TranslateTransform X="0.02" Y="0.2"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="1" Color="Green"/>
                                <GradientStop Offset="0.2" Color="Green"/>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>                    
                    <Ellipse Margin="3" Name="highlightCircle">
                        <Ellipse.Fill >
                                                <LinearGradientBrush>
                                                    <GradientStop Offset="0" Color="#50FFFFFF"/>
                                                    <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                                    <GradientStop Offset="1" Color="#50FFFFFF"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse Name="disableCircle" >
                        <Ellipse.Fill>
                                                <LinearGradientBrush >
                                                    <GradientStop Offset="0" Color="#50FFFFFF"/>
                                                    <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                                    <GradientStop Offset="1" Color="#50FFFFFF"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                    </Ellipse>
                    <Border Name="highlightBorder"  BorderBrush="#002A00" CornerRadius="18" BorderThickness="0,0,1,1">
                        <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="highlightBorder"  Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter TargetName="highlightBorder"  Property="BorderThickness" Value="1,1,0,0" />
                        <Setter TargetName="highlightBorder"  Property="BorderBrush" Value="#002A00" />                       
                        <Setter TargetName="highlightCircle" Property="Fill">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.4,1">
                                                    <GradientStop Offset="0" Color="#50FFFFFF"/>
                                                    <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                                    <GradientStop Offset="1" Color="#50FFFFFF"/>
                                                </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="disableCircle" Property="Fill">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.6,0" EndPoint="1.4,1">
                                    <GradientStop Offset="0" Color="#C3C8C9"/>
                                    <GradientStop Offset="0.5" Color="#CFD3D4"/>
                                    <GradientStop Offset="2" Color="#9A9FA1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="True">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter TargetName="highlightBorder"  Property="BorderThickness" Value="1,1,1,1" />
                                        <Setter TargetName="highlightBorder" Property="BorderBrush">
                                            <Setter.Value>
                                                <LinearGradientBrush StartPoint="0.6,0" EndPoint="1.4,1">
                                                    <GradientStop Offset="0" Color="#3FFF3F"/>
                                                    <GradientStop Offset="0" Color="#3FFF3F"/>
                                                    <GradientStop Offset="0.5" Color="#002A00"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>                  
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

0 comments

Related Posts Plugin for WordPress, Blogger...