Back to Questions
3.9k
views2
comments
XAML
f#xaml

Hi

Does anyone use XAML with F# ? If so, do you use it programatically? Use XamlReader? (If so, how fast is it?) Or use some verison of file.xaml + file.xaml.fs ?

Example of XAML 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

 <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
          <ColumnDefinition Width="13"/>
        </Grid.ColumnDefinitions>
        <ContentPresenter 
          Name="Icon"
          Margin="6,0,6,0"
          VerticalAlignment="Center"
          ContentSource="Icon"/>
        <ContentPresenter 
          Name="HeaderHost"
          Grid.Column="1"
          ContentSource="Header"
          RecognizesAccessKey="True"/>
        <TextBlock x:Name="InputGestureText"
          Grid.Column="2"
          Text="{TemplateBinding InputGestureText}"
          Margin="5,2,2,2"
          DockPanel.Dock="Right"/>
        
        
          <Border 
            Name="SubmenuBorder"
            SnapsToDevicePixels="True"
            Background="{StaticResource WindowBackgroundBrush}"
            BorderBrush="{StaticResource SolidBorderBrush}"
            BorderThickness="1" >
            <StackPanel  
              IsItemsHost="True" 
              KeyboardNavigation.DirectionalNavigation="Cycle" />
          </Border>
        
      </Grid>

(roughly) equivalent F# code (probably some mistakes + the fact that this is an excerpt)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

let sub_menu_header_template =
    let template = new ControlTemplate((type MenuItem))
    
    let border = new FrameworkElementFactory((type Border))
    
    let grid = new FrameworkElementFactory((type Grid))
    
    let c1 = new FrameworkElementFactory((type ColumnDefinition))
    c1.SetValue(ColumnDefinition.WidthProperty, new GridLength(1.0, GridUnitType.Auto))
    c1.SetValue(ColumnDefinition.SharedSizeGroupProperty, "icon")
    
    let c2 = new FrameworkElementFactory((type ColumnDefinition))
    c2.SetValue(ColumnDefinition.WidthProperty, new GridLength(1.0, GridUnitType.Star))
    
    let c3 = new FrameworkElementFactory((type ColumnDefinition))
    c3.SetValue(ColumnDefinition.WidthProperty, new GridLength(1.0, GridUnitType.Auto))
    c3.SetValue(ColumnDefinition.SharedSizeGroupProperty, "shortcut")
    
    let c4 = new FrameworkElementFactory((type ColumnDefinition))
    c4.SetValue(ColumnDefinition.WidthProperty, new GridLength(13.))
    
    grid.AppendChild c1
    grid.AppendChild c2
    grid.AppendChild c3
    grid.AppendChild c4
    
    //icon
    let content_presenter = new FrameworkElementFactory((type ContentPresenter))
    content_presenter.SetValue(ContentPresenter.NameProperty, "icon")
    content_presenter.SetValue(ContentPresenter.MarginProperty, new Thickness(6.,0.,6.,0.))
    content_presenter.SetValue(ContentPresenter.ContentSourceProperty, "Icon")
    content_presenter.SetValue(ContentPresenter.VerticalAlignmentProperty, VerticalAlignment.Center)
    content_presenter.SetValue(Grid.ColumnProperty, 0)
    grid.AppendChild content_presenter
    
    //header (item)
    let content_presenter = new FrameworkElementFactory((type ContentPresenter))
    content_presenter.SetValue(ContentPresenter.NameProperty, "header_host")
    content_presenter.SetValue(ContentPresenter.ContentSourceProperty, "Header")
    content_presenter.SetValue(ContentPresenter.RecognizesAccessKeyProperty, true)
    content_presenter.SetValue(Grid.ColumnProperty, 1)
    grid.AppendChild content_presenter
    
    //shortcut
    let text_block = new FrameworkElementFactory((type ContentPresenter))
    text_block.SetValue(ContentPresenter.NameProperty, "input_gesture_text")
    text_block.SetValue(TextBlock.TextProperty, template_binding MenuItem.InputGestureTextProperty)
    text_block.SetValue(ContentPresenter.MarginProperty, new Thickness(5.,2.,2.,2.))
    text_block.SetValue(DockPanel.DockProperty, Dock.Right)
    text_block.SetValue(Grid.ColumnProperty, 2)
    grid.AppendChild text_block
    
    //check mark
    let path = new FrameworkElementFactory((type Path)) 
    path.SetValue(Path.HorizontalAlignmentProperty, HorizontalAlignment.Center) 
    path.SetValue(Path.VerticalAlignmentProperty, VerticalAlignment.Center) 
    let g = 
        let geometry = new StreamGeometry()
        let ctx = geometry.Open()
        Idioms.using ctx (fun ctx -> 
             ctx.BeginFigure(new Point(0.0, 0.0), true, true)
            ctx.LineTo(new Point(0.0, 7.0), true, false)
            ctx.LineTo(new Point(4.0, 3.5), true, false)
        )
        geometry.Freeze()
        geometry
    path.SetValue(Path.DataProperty, g)
    path.SetValue(Path.FillProperty, glyph_brush) 
    path.SetValue(Grid.ColumnProperty, 3)
    grid.AppendChild text_block
    
     
    //sub menu popup, if any
    let popup = new FrameworkElementFactory((type Popup))
    popup.SetValue(Popup.NameProperty, "popup")
    popup.SetValue(Popup.PlacementProperty, PlacementMode.Right)
    popup.SetValue(Popup.HorizontalOffsetProperty, -4.0)
    let binding = template_binding MenuItem.IsSubmenuOpenProperty 
    popup.SetValue(Popup.IsOpenProperty, binding)
    popup.SetValue(Popup.AllowsTransparencyProperty, true)
    popup.SetValue(Popup.FocusableProperty, false)
    popup.SetValue(Popup.PopupAnimationProperty, PopupAnimation.Fade)
    
    //children
    let sub_border = new FrameworkElementFactory((type Border))
    sub_border.SetValue(Border.NameProperty, "sub_menu_border")
    sub_border.SetValue(Border.SnapsToDevicePixelsProperty, true)
    sub_border.SetValue(Border.BackgroundProperty, window_background_brush)
    sub_border.SetValue(Border.BorderBrushProperty, solid_border_brush)
    sub_border.SetValue(Border.BorderThicknessProperty, new Thickness(1.0))
    
    let sub_panel = new FrameworkElementFactory((type StackPanel))
    sub_panel.SetValue(StackPanel.IsItemsHostProperty, true)
    sub_panel.SetValue(KeyboardNavigation.DirectionalNavigationProperty, KeyboardNavigationMode.Cycle)
    
    //clean-up by adding the panel to the border and the border to the template
    sub_border.AppendChild sub_panel
    popup.AppendChild sub_border
    grid.AppendChild popup
    border.AppendChild grid
    template.VisualTree <- border
    template

Obviously, the hard-coded version can quickly become quite long, especially with Path, ColumnDefinitions "tricks", etc.

Thanks for any insight !

Julien

.

Both versions are obviously highly redundant. However, you should be able to drastically reduce the size of the F# version by factoring the common code (look at all those repeated identifiers!).

I would expect F# to displace XAML as a consequence.

By on 6/10/2007 3:01 PM ()

I guess you could, but then you have to do a whole lot of casting which might not always work... (I had strated doing it on some parts of the code, but even then, the gain in coding programatically vs XML-ing wasn't that huge (especially with the VS auto completion feature)).

In addition to that, while trying to translate the XAML tags into code, I came upon a case where basically you couldn't "code" it because it required accessing some protected (or private? I can't remember) property...

FWIW, after seeing the samples (bag-o-tricks) on [link:blogs.msdn.com] I decided to use a different and simpler (more efficient?) approach : use the XAML for all widgets / styles / templates, and F# for the data structures, converters and custom widgets. You then only have to extend the namespace and voilà ! Much ado about ... well, not that much.

You may) keep the C# code for widgets, but externalize all the rest through functional programming and composition (ie your object has an F#-programmed object instead of having the properties itself)...

You lose a bit of time by not being able to have the F# project along the XAML one, but it's (IMO) a lesser pain...

By on 6/13/2007 6:18 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper