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

Salakhetdinov Shamil mcp2004 at mail.ru
Sat May 30 04:06:07 CDT 2009


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

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

> Hi Shamil
> 
> OK, that's a lot of code to write by hand to create three buttons - I'm not sure my patience will hold for writing code at this level, not when tools are available. I feel more comfortable using the native methods of Visual Studio. And still, the only reason I have Expression Design is because it comes as part of the web designer tools add-on to the Action Pack. The reason, I think, is because MS wishes to push Silverlight development. 
> 
> As for code behind xaml files, I have no idea.
> 
> Which ActiveX is needed, I don't know. But if I load your file in Chrome it pops an error box multiple times about a component not found. That component is xpcom.dll which doesn't sound like an ActiveX to me. However, if I search my Vista, no xpcom.dll is found so the message is true.
> 
> /gustav
> 
> 
> >>> Salakhetdinov Shamil <mcp2004 at mail.ru> 29-05-2009 23:48 >>>
> Hi Gustav,
> 
> I have created this code by hand - I have no Expression Design 2 here.
> 
> I'd guess Chrome, Safari and Opera will start support .xaml files rendering soon as recently FireFox 3.x have done: AFAIU rendering .xaml files is done by using something like ActiveX control - do you know which one?
> 
> BTW, what I do not know but (I'd hope that it should work) is how to use code behind with such .xaml pages? If create e.g. 
> 
> http://shamils-4.hosting.parking.ru/wpf/SpecialButtonStyleX.xaml.cs 
> 
> processing button click event then it will not run - it will be blocked because of security reasons - there should be possible I guess/hope to accompany such .xaml.cs files with special manifest files to have code behind enabled? 
> 
> Just wondering - if loading .xaml pages with code behind would be possible and also if it would be possible to have entry .xaml pages to call other ones located on server then that would be a way to make light .xaml (not XBAP) applications with .xaml pages loaded from server, compiled and run in demand...
> 
> Thank you.
> 
> --
> Shamil  
> 
> -----Original Message-----
> From: "Gustav Brock" <Gustav at cactus.dk>
> To: <dba-VB at databaseadvisors.com>
> Date: Fri, 29 May 2009 23:18:43 +0200
> Subject: [dba-VB]  Fw: Re:  SCRUM/WPF - Buttons Styling Exercizes	(StepN)
> 
> > Hi Shamil
> > 
> > OK, that's fine.
> > The buttons display correctly in Firefox here on Vista. But neither Chrome, Safari nor Opera likes it.
> > 
> > By the way, how did you create that code? By hand or some tool like Expression Design 2?
> > 
> > /gustav
> > 
> > 
> > >>> Salakhetdinov Shamil <mcp2004 at mail.ru> 29-05-2009 21:53 >>>
> > 
> > Hi Gustav,
> > 
> > I just wanted to learn/play with .xaml here together with you and other AccessD-VBA members - I assumed that everybody here do have IE 7 or IE8 and MS Windows Vista or MS Windows XP with .NET Framework 3.0/3.5 to view .xaml files rendering directly in the browser. 
> > The styles created in those .xaml files can be reused in all kinds of WPF applications e.g. SilverLight ones - and SilverLight will run on any browser installed on Windows system.
> > But again the purpose is to just learn .xaml "tricks & techniques" and use them e.g. in WPf desktop applications, which do not need browser at all.
> > 
> > --
> > Shamil
> > 
> > 
> > -----Original Message-----
> > From: "Gustav Brock" <Gustav at cactus.dk>
> > To: <dba-VB at databaseadvisors.com>
> > Date: Fri, 29 May 2009 19:10:46 +0200
> > Subject: Re: [dba-VB] SCRUM/WPF - Buttons Styling Exerc izes (StepN)
> > 
> > > 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>>>
> 
> _______________________________________________
> dba-VB mailing list
> dba-VB at databaseadvisors.com
> http://databaseadvisors.com/mailman/listinfo/dba-vb
> http://www.databaseadvisors.com
> 




More information about the dba-VB mailing list