Friday, September 05, 2008

I Love VB: Silverlight UI Creation with XML Literals

by preishuber via Hannes Preishuber on 9/5/2008 6:25:17 AM

My actual problem is to develop a image (object) carousel. There are a lot of details to take care about. One of them is to create images dynamically with a great UI like border or shadow. First I startet up to write code like:

 Dim brd As New Border
 brd.Height = 130 'Bildhöhe+ 30 für text
 brd.Background = New SolidColorBrush(Colors.LightGray)
 brd.CornerRadius = New CornerRadius(3)
 brd.BorderThickness = New Thickness(3)
 Dim grdcoll As New GradientStopCollection()
 Dim grdstop As New GradientStop
 grdstop.Offset = 0
 grdstop.Color = Colors.LightGray
  grdcoll.Add(grdstop)

To create a good UI by code is really a pain. It is much easier to draw with Expression Blend. VB 2008 have a feature called XML literals and XAML is XML. So I copy the xaml code direct to Visual Studio like

   Dim ui = <Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         Height="130" CornerRadius="3,3,3,3"
                         BorderThickness="0,0,0,3">
                         <Border.BorderBrush>
                             <RadialGradientBrush>
                                 <RadialGradientBrush.RelativeTransform>
                                     <TransformGroup>
                                         <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="0.129"/>
                                         <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                         <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                         <TranslateTransform X="0" Y="0.476"/>
                                     </TransformGroup>
                                 </RadialGradientBrush.RelativeTransform>
                                 <GradientStop Color="#FF706F6F"/>
                                 <GradientStop Color="#FFF7F2F2" Offset="1"/>
                             </RadialGradientBrush>
                         </Border.BorderBrush>
                         <Canvas>
                             <Image Source=<%= "/images/" + dateien(i) %>
                                 Width="100" Height="100"
                                 VerticalAlignment="Top"/>
                             <TextBlock Canvas.Left="0" TextAlignment="Center"
                                 Canvas.Top="100" VerticalAlignment="Center"
                                 Width="100"
                                 >
                                 <%= Replace(dateien(i), ".jpg", "") %>
                             </TextBlock>
                         </Canvas>
                     </Border>

            Dim xaml1 = XamlReader.Load(ui.ToString)
            Me.Children.Add(CType(xaml1, UIElement))

As you can see there is also the posibility to set attributes with expressions (like in asp.net) which I have used for image path. Then you can create from xaml fragment a control and add it to a node of the xaml hierarchy.

Great – I love that way.

The actual result shows the speakers of the ADC conference