[dba-VB] SCRUM/WPF - Buttons Styling Exercizes (StepN)

Hi Gustav,

Great!
Have a look a few changes in xml styles and buttons are looking quite different:

http://shamils-4.hosting.parking.ru/wpf/SpecialButtonStyleX1.xaml

<<<
> One more thing to add to the to-do list ...
>>>
But we can make such TODO lists fulfilled quicker if work on them together, can't we?

Not yet convinced on the latter statement? ;)

--
Shamil

P.S. The above page XML.

<Page
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Sample Buttons"  Height="200"  Width="300">

    <Page.Resources>
        <Style x:Key="specialButton" TargetType="Button">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="200"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse x:Name="GelBackground"
                               Opacity="1"
                             Height="50"
                             Width="100"
                               StrokeThickness="5">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="White" Offset="0" />
                                        <GradientStop Color="#666666" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#E65156" Offset="0"/>
                                        <GradientStop Color="#CA171D" Offset="1"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse x:Name="GelShine"    
                                Margin="2,2,2,2"    
                                VerticalAlignment="Top"    
                                Opacity="1"    
                                Stroke="Transparent"    
                                Width="100"
                                Height="15
                                ">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#ccffffff" Offset="0"/>
                                        <GradientStop Color="Transparent" Offset="1"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="GelBackground">
                                    <Setter.Value>
                                        <RadialGradientBrush>
                                            <GradientStop Color="#CA171D" Offset="0" />
                                            <GradientStop Color="#E65156" Offset="0"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Fill" TargetName="GelBackground">
                                    <Setter.Value>
                                        <RadialGradientBrush>
                                            <GradientStop Color="Chocolate" Offset="0" />
                                            <GradientStop Color="CornflowerBlue" Offset="0"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Fill" TargetName="GelBackground">
                                    <Setter.Value>
                                        <RadialGradientBrush>
                                            <GradientStop Color="SteelBlue" Offset="0" />
                                            <GradientStop Color="LightGray" Offset="0"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Page.Resources>

    <StackPanel Orientation="Vertical">
        <Button Style="{StaticResource specialButton}" Content="Foo" />
        <Button Style="{StaticResource specialButton}" IsDefault="True" Content="Bar" Margin="0,5,0,5" />
        <Button Style="{StaticResource specialButton}" IsEnabled="False" Content="Baz" />
    </StackPanel>
</Page> 


-----Original Message-----
From: "Gustav Brock" <Gustav at cactus.dk>
To: <dba-vb at databaseadvisors.com>
Date: Sat, 30 May 2009 12:26:33 +0200
Subject: Re: [dba-VB] SCRUM/WPF - Buttons Styling Exercizes (StepN)

> Hi Shamil
> 
> That was much better! I'm convinced.
> One more thing to add to the to-do list ...
> 
> /gustav
> 
> 
> >>> Salakhetdinov Shamil <mcp2004 at mail.ru> 30-05-2009 11:06 >>>
> 
> Hi Gustav,
> 
> Yes, it looks like a lot of code but you can note that there are recurring blocks in it, which have just a few differences IOW they can be created by copy&paste. I'd also note that typing directly in XAML (when one knows what to type - I'm not yet that far there) woudln't be more time consuming and even probably less time consuming that using Expression Design: of course Expression Design would be useful to define the styles (and that work is more for graphic artists designers) but then those styles go to style dictionary of WPF application and one still better use direct XAML typing/XAML knowledge if onr plan to work professionally in WPF development...
> 
> And when styles are in a dictonary then the code for three buttons will become just several lines:
> 
>     <StackPanel Orientation="Vertical">
>         <Button Style="{StaticResource specialButton}" Content="Foo" />
>         <Button Style="{StaticResource specialButton}" IsDefault="True" Content="Bar" Margin="0,5,0,5" />
>         <Button Style="{StaticResource specialButton}" IsEnabled="False" Content="Baz" />
>     </StackPanel>
> 
> with a common for all WPF forms/pages/windows header and footer lines.
> 
> I'd also note that the styles we will make here for three buttons can be applied to all the buttons in many applications without any additional efforts just by referencing button's style from dictionary Style="{StaticResource specialButton}" ...
> 
> Not yet convinced?
> 
> Thank you.
> 
> --
> Shamil
> 
<<< skip>>