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

Gustav Brock Gustav at cactus.dk
Fri May 29 12:10:46 CDT 2009


Hi Shamil

I can see you have brushed up the example a bit. It is very neat now.

My problem with xaml is that it is browser specific. It won't run at all in, say, Google Chrome. This may or may not be in issue but for a public web site I think it will be - which in my opinion limits the use of this technique.

/gustav


>>> Salakhetdinov Shamil <mcp2004 at mail.ru> 29-05-2009 18:54 >>>

Hi All,

Because of absense of feedback on first message I decided to skip some steps and  to present the following WPF buttons styling sample:

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

If it will not activate some discussion here in what direction to extend this sample then some other proposals would follow from my side: WPF GUI design and functioning is a "rather special and quite advanced story" - why not investigate this story together? For example the following sample http://www.beacosta.com/blog/?p=40 can be used to make even more advanced one, which could be used in such applications as  Solar System planets movement watching/learning, airport or harbor area dispatching etc. And I must note that programming of those applications would be rather different from what we all who are working with MS Access/VBA or VB6 or even C#/VB.NET but not WPF, are accustomed to...

Thank you.

--
Shamil

P.S. Here is the source of the above link:

<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="14"/>
            <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>
                            <Rectangle x:Name="GelBackground"    
                               Opacity="1" 
                               RadiusX="6"    
                               RadiusY="6"    
                               StrokeThickness="0.35">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="White" Offset="0" />
                                        <GradientStop Color="#666666" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#E65156" Offset="0"/>
                                        <GradientStop Color="#CA171D" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="GelShine"    
                                Margin="2,2,2,0"    
                                VerticalAlignment="Top"    
                                RadiusX="6"    
                                RadiusY="6"    
                                Opacity="1"    
                                Stroke="Transparent"    
                                Height="15px">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#ccffffff" Offset="0"/>
                                        <GradientStop Color="Transparent" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <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: Salakhetdinov Shamil <mcp2004 at mail.ru>
To: dba-VB <dba-vb at databaseadvisors.com>
Date: Thu, 28 May 2009 12:14:29 +0400
Subject: [dba-VB] SCRUM/WPF - Buttons Styling Exercizes (Step1)

> Hi All,
> 
> Let's start WPF buttons styling exercizes - here is a web page, which should display three stacked buttons when loaded into IE 7/8 or FireFox 3.x on MS Windows Vista, and I guess on latest Windows XP SP3(?) - but I haven't tested that latter:
> 
> http://shamils-4.hosting.parking.ru/wpf/SpecialButtonStyle1.xaml 
> 
<<< snip>>>





More information about the dba-VB mailing list