I was looking around the Internet to see if anyone has automatically loaded a resource file so that you can skin an XAML app.

It turns out that it has been done and is quite easy.

http://www.dave5.com/blog/Trackback.aspx?guid=47778bf9-abaf-46a9-aeee-d37ae2658fbe shows a simple method (I think based on the link below). Simply it loads a resource and then assigns it to the application.

http://blogs.msdn.com/mitchw/articles/68541.aspx: shows a more complete example of how to load a "Style" resource at runtime. In the styles you can have new visual trees and the like that you would have in any application.

Some code to load XAML at runtime can be found

I had a really good set of conversations about the issue of loading styles and new UI designs into an Avalon app. Thanks go out to Micheal Latta and Jason [MobiForm]

Here's some of the conversation and some comments I have around them.

It is certanly possible to load different UI controls into a window at run-time. AVPad does this now to a degree. The real issue is going to be hooking the UI up to the code behind class(es). Loading XAML at runtime will not benifit from the event delegate generation and element naming that exist in the compiled code/BAML combination. If the XAML loader parses all properties and retains those as properties at run-time you could do a pass on the parse tree to hook these things up at run-time. I expect to see many applications offering this type of pluggable UI model as Avalon sinks into the developer community. --Michael

Essentially what is being implied here is that you can load up XAML at runtime but you will have to re-hook up the properties and the events at run-time because the loader. However, I have been thinking that getting the people who change the UI to create BAML is not all of a problem really. Therefore the app will be able to load a new compiled XAML file and use the same UI class on the backend.

An example might be we design two layouts each different from each other however they both share the same code-behind class:

<window class="AvalonApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" x="http://schemas.microsoft.com/winfx/xaml/2005" text="AvalonApplication1">

<window class="AvalonApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" x="http://schemas.microsoft.com/winfx/xaml/2005" text="AvalonApplication2">

This might work, I haven't tried it yet.

I am looking into loading a XAML file that simply contains resources at runtime and then assigning them also at runtime. I will let you know of the results.

I have been thinking and looking into whether I should code up what I am thinking, I would like to pass it by you guys to see if it is possible or has been done before (or if there is an easier way).

Basically my thoughts have been these:
In Avalon, is it possible to completely change the layout and styles at runtime such that I could have "n" different layouts to the same app, all of which are loaded as requested by the user? What I mean by completely change, is not only adjusting colours and graphical styling, but also adjusting ContentTemplates, HeaderTemplates and positioning in the Logical Tree. Would it be possible to have one "Style" that is based around, say, a DockPanel and another around a Grid Panel each can be loaded and alternated between at runtime, but have the Backend Business Logic remain untouched?

In essence I would like to switch from one XAML based front-end to another XAML based front end. Without affecting the application.

My First thought was, could I achieve this with a style sheet system, so I investigated the Styles property in Avalon and I couldn't determine if the styles could be stored in an external resource, such as a styles folder which contains all the different styles. Can the styles be stored in an external resource?

I did however see some threads (most specifically "How Do I - Resource-Style Questions") which pointed me towards <button style="DynamicResource: ">..</button> I was thinking this would enable me to keep the logical tree static but just change things such as colours, widths and the visual tree of certain components based on configuration options. But I am not too sure if this is what I am aiming for. I could configure colours and widths etc, but I don't think they could be bound to XAML (i.e loaded from a file).

My second thought was can we change the XAML file that the system uses at runtime? I have noticed some code in InitializeComponent of the window which sets which compiled XAML file to use:

public void InitializeComponent() {
if (_contentLoaded) {
return;
}
_contentLoaded = true;
System.Uri resourceLocator =
new System.Uri("Window1.baml",
System.UriKind.RelativeOrAbsolute);
System.Windows.Application.LoadComponent(this,
resourceLocator);
}

Could I basically re-call LoadComponent at any point in the app to change the UI based on another BAML file that user specifies. I assume we are not able too because _contentLoaded seems to be there to catch cases like this where InitializeComponent gets called more than once.
-Or-
Thirdly, Could I just have the URI as an item that is read in at init time, and when the user wants to change their UI they have to restart the application.

Fourthly, I thought that localisation might be similar to what I need, each language is compiled into a Resource that can be built into the assembly or referenced externally. However due to my lack of experience I thought that there might be a correlation between a Resource File and the resources in a XAML file (Page.Resources/Application.Resources) but I have not been able to determine if they are one and the same thing or completely different. So I am not aware that I could reference the resources externally in a XAML file from a ResourceFile (see thought 1 ;) )

I posted around some news groups to find an answer about my crash and a I recieved the following reply from Mike Hillbert.

When you're animating Width or Height, you have to specify both the From and the To, or you have to have specified the base value somewhere (e.g. on the element itself).

That's because when you don't specify the From or To it gets inferred from the base (unanimated) value. And in the case of Width and Height, the base value often isn't known until later when layout runs.

For example, in this page

<Page ...>
...
<Page.Storyboards>
<SetterTimeline TargetName="btn" Path="(Button.Width)" >
<DoubleAnimation From="50" />
</SetterTimeline>
</Page.Storyboards>
...
<Button Width="100" Name="btn" Background="Blue">Click</Button>
...
</Page>

the button's width is explicitly set on the <Button>, so the animation implicitly takes the width to 100 (from 50). But if you don't have the Width set in the <Button>, and don't have it anywhere else (e.g. in a Style), you have to have the From on the DoubleAnimation.

I think it basically sums up the problem quite simply. I wasn't giving the actual MenuItem a width, the "Owner Draw" elements in the Visual Tree had a width but the actual menu item didn't. Funnily enough (Well it is not that funny), I tried the suggested fixes and the crash was still occuring. I also tried the following bit of XAML which is supposed to give every control that meets the style criteria a width of 200:

<Style TargetType="{x:Type MenuItem}" x:Key="{x:Type MenuItem}" >
<Setter Property="Width" Value="200" />
...
...

I think my next course of action is to try and get this in a proper WinFX application rather than just XAMLPad.

Wow, I have just answered all the questions on Start.com and it gives you the following link http://www.start.com/myw3b/ to their new beta rss/search/info/do-everything-you-need site. Needless to say, this and the google services are bringing a much needed kick of interactivity into websites. :)

I recieved some answers to my questions :) They were quite helpful, so I will document them here just incase they ever help anyone :).

1) In the control template you can use RoutedEvents to start and stop a time line. (I don't know how I missed this). You can also use them inside DataTemplates as well.
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginAction TargetName="Timeline">
<StopAction TargetName="Timeline2">
<EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>

These triggers are able to be placed inside a style. (link at the bottom to my example)

2) Again my mistake, I remember a error I got against the xsd saying TargetName needs to be present, but I must have been mistaken or it could have been another XAML Element that requires it. Anyway, the following is complety valid and can be used to apply against any control.

One thing I have learnt by pure experiment is that you can have storyboards inside a ControlTemplate/DataTemplate. This means that any control that meets the TargetType criteria in the style header can access the storyboard associated with it. For my example I have attached a storyboard that will be available to all MenuItems.

3) No answer yet butI presume it will be a while before all the documentation catches up to the implementation.

Anyway here is my wobbly menu example:

• CheesyWobblymenu.xaml

Technorati Tags

xaml [feed], amazon [feed], windows api [feed], markup language [feed], wpf [feed], C# [feed], Chris sells [feed], Layout [feed]

Related Wikipedia Documents

Windows Vista, XAML, User interface markup language, Windows Presentation Foundation, Windows API, Windows Presentation Foundation, Cairo (graphics), Anders Hejlsberg, Wikipedia: Layout engine

My Related Documents

C#, .Net Framework: XAML Menu Throbbing!, C#, .Net Framework: Changing Styles with the times (Answers and Thoughts), C#, .Net Framework: XAML Menu Throbbing! (Answers to Questions), C#, .Net Framework: XAML Menu Example, C#, .Net Framework: Programming Windows Presentation Foundation (WPF), C#, .Net Framework: DoubleAnimation Crashes XAMLPad (MayCTP): Some Answers To Questions

Related Amazon Books

Windows API Bible: (UK)/(USA), Windows Forms Programming in C#: (UK)/(USA), Programming Windows Presentation Foundation: (UK)/(USA), Essential .Net Volume 1: (UK)/(USA), Mastering Visual Studio.NET: (UK)/(USA)

Related Images

Permanent Link

Has anyone experienced a crash with XAMLPad (I have not tried creating a complete app yet) where by if I have to following:

<settertimeline path="(MenuItem.Width)" name="Timeline">
<doubleanimation autoreverse="True" duration="0:0:0.5" to="150" from="100">
</settertimeline>

And I remove the "From" Attribute it causes XAMLPad to crash.

<settertimeline path="(MenuItem.Width)" name="Timeline">
<doubleanimation autoreverse="True" duration="0:0:0.5" to="150">
</settertimeline>

This timeline is used to do a basic animation of the width on a menu item. I am not including the "From" attribute because I want the default value of the MenuItem's width to be the start value. Is this the correct thing to do? Some examples that I have seen say this is possible.

Context: The Timeline is within a Style on HeaderTemplates DataTemplate Element (because I am cusom drawing the control)

Example XAML can be found at http://www.kinlan.co.uk/sample_sources/XAMLAnimationCrash.xaml

I had a really cool idea (well I thought it was cool anyway).

I was going to extend my "GelButton" Menu items XAML Example with some extra functionality. I was going to make each of the "GelButtons" ever-so-slightly throb when the user hovers over them. Even if the previous post never gets used I thought it would be a good learning experience.

It has been a good learning experience because I have found a few things that can't be done in XAML (May CTP).

1. It seems one cannot stop or start an animation in a storyboard based off the actions of a Trigger.
2. It appears that one cannot apply a generic animation to all controls of a specific type. (I am going to stop using one refering to me or you :) ) You cannot say I want a Timeline to be run for all menu items. You (as it appears) have to create a time line for every control.
3. TargetID is used everywhere in the XAML examples yet it no longer exists, TargetName is the one to use.

Point 3 I can deal with, but points 1 and 2 seem to be fundamental requirements for distinguishing between UI/Presentation and Application implementation. Ohwell, maybe other people will be able to recognise if this is a problem or correct me if I am wrong :).

I will post around the Internet and News Groups to see if any workarounds exist or other solutions.

I may post examples of what I think would be the correct way of doing things (ps I am normally wrong on most occasions ;))

Technorati Tags

xaml [feed], amazon [feed], windows api [feed], markup language [feed], wpf [feed], C# [feed], Chris sells [feed], Layout [feed]

Related Wikipedia Documents

Windows Vista, XAML, User interface markup language, Windows Presentation Foundation, Windows API, Windows Presentation Foundation, Cairo (graphics), Anders Hejlsberg, Wikipedia: Layout engine

My Related Documents

C#, .Net Framework: XAML Menu Throbbing!, C#, .Net Framework: Changing Styles with the times (Answers and Thoughts), C#, .Net Framework: XAML Menu Throbbing! (Answers to Questions), C#, .Net Framework: XAML Menu Example, C#, .Net Framework: Programming Windows Presentation Foundation (WPF), C#, .Net Framework: DoubleAnimation Crashes XAMLPad (MayCTP): Some Answers To Questions

Related Amazon Books

Windows API Bible: (UK)/(USA), Windows Forms Programming in C#: (UK)/(USA), Programming Windows Presentation Foundation: (UK)/(USA), Essential .Net Volume 1: (UK)/(USA), Mastering Visual Studio.NET: (UK)/(USA)

Related Images

Just a quick note or two about my previous post.

1. It no longer animates like the Animated Gel Button
2. The GelButton idea was actually modified code from the same site as I mentioned, however it was a different page.
   
   

Technorati Tags

xaml [feed], amazon [feed], windows api [feed], markup language [feed], wpf [feed], C# [feed], Chris sells [feed], Layout [feed]

Related Wikipedia Documents

Windows Vista, XAML, User interface markup language, Windows Presentation Foundation, Windows API, Windows Presentation Foundation, Cairo (graphics), Anders Hejlsberg, Wikipedia: Layout engine

My Related Documents

C#, .Net Framework: XAML Menu Throbbing!, C#, .Net Framework: Changing Styles with the times (Answers and Thoughts), C#, .Net Framework: XAML Menu Throbbing! (Answers to Questions), C#, .Net Framework: XAML Menu Example, C#, .Net Framework: Programming Windows Presentation Foundation (WPF), C#, .Net Framework: DoubleAnimation Crashes XAMLPad (MayCTP): Some Answers To Questions

Related Amazon Books

Windows API Bible: (UK)/(USA), Windows Forms Programming in C#: (UK)/(USA), Programming Windows Presentation Foundation: (UK)/(USA), Essential .Net Volume 1: (UK)/(USA), Mastering Visual Studio.NET: (UK)/(USA)

Related Images

I have been messing around with the Map CTP Avalon Framework... I am still early in the learning stages as you can see by the following example.

Basically this xaml (load it up in XAMLPad) creates a menu which has a custom style assigned to it. This style draws each of the menu items as "GelButtons". It took me a while to work out what to do. Initially I created a ControlTemplate, infact I needed to create a HeaderTemplate in the style.

It was pretty straight forward in the end. I hope someone finds it usefull.

Here Goes:

<Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005" 
    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
    <DockPanel>
        <Border Background="SkyBlue" BorderBrush="Black" 
        BorderThickness="1" DockPanel.Dock="Top">
            <Menu Background="SkyBlue">
                <MenuItem Header="Language" >
                    <MenuItem Header="English"
                                      Name="english" />
                    <MenuItem Header="German"
                              Name="german"  />
                    <MenuItem Header="Italian"
                              Name="italian"/>
                </MenuItem>
            </Menu>
        </Border>
        <Border Height="25" Background="SkyBlue"
                BorderBrush="Black" BorderThickness="1" 
                DockPanel.Dock="Top">
        </Border>
        <Border Height="25" Background="#ffff99" 
            BorderBrush="Black" BorderThickness="1" 
            DockPanel.Dock="Bottom">
            <TextBlock Foreground="black">Dock = "Bottom"
            </TextBlock>
        </Border>
        <Border Width="200" Background="PaleGreen" 
            BorderBrush="Black" BorderThickness="1" 
            DockPanel.Dock="Left">
            <TextBlock Foreground="black">Dock = "Left"
            </TextBlock>
        </Border>
        <Border Background="White" BorderBrush="Black"
                BorderThickness="1">
            <TextFlow Background="LightSkyBlue" 
                Foreground="Black" 
                FontFamily="Palatino Linotype" 
                FontSize="14" 
                FontWeight="Normal" TextAlignment="Left" 
                TextWrap="Wrap">
                <Paragraph>
                    <LineBreak/>
                </Paragraph>
            </TextFlow>
        </Border>
    </DockPanel>
    <Page.Resources>
        <Style TargetType="{x:Type MenuItem}" 
            x:Key="{x:Type MenuItem}" >
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate DataType="{x:Type MenuItem}" >
                        <Grid Width="{TemplateBinding Width}" 
                            Height="{TemplateBinding Height}" >
                            <Rectangle x:Name="GelBackground"
                     Opacity="1" RadiusX="9" RadiusY="9"
                     Fill="{TemplateBinding ContentControl.Background}" 
                     Stroke="VerticalGradient #cc000000 white " 
                     StrokeThickness="1"  />
                            <Rectangle x:Name="GelShine" 
                                Margin="4,3,4,0" 
                                VerticalAlignment="top" 
                                RadiusX="6" 
                                RadiusY="6" Opacity="1" 
                                Fill="VerticalGradient 
                                    #ccffffff transparent" 
                                Stroke="transparent"  
                                Height="15px" ></Rectangle>
                            <ContentPresenter 
                                 x:Name="GelButtonContentShadow"
                                 VerticalAlignment="center" 
                                 HorizontalAlignment="center" 
                                 Content="{TemplateBinding
                                        ContentControl.Content}" 
                                 Margin="15,5,15,5" 
                                 TextBlock.Foreground="black" 
                                 RenderTransform="translate 0 1" />
                            <ContentPresenter 
                                x:Name="GelButtonContentWhite" 
                                VerticalAlignment="center" 
                                HorizontalAlignment="center" 
                                Content="{TemplateBinding 
                                    ContentControl.Content}" 
                                Margin="15,5,15,5" 
                                TextBlock.Foreground="white" />
                        </Grid>
                        <DataTemplate.Triggers>
                            <Trigger Property="IsMouseOver" 
                                Value="True">
                                <Setter Property="MenuItem.Background"
                                  Value="Red"></Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" 
                                Value="False">
                                <Setter Property="MenuItem.Background" 
                                    Value="SkyBlue"></Setter>
                            </Trigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
</Page>

Technorati Tags

xaml [feed], amazon [feed], windows api [feed], markup language [feed], wpf [feed], C# [feed], Chris sells [feed], Layout [feed]

Related Wikipedia Documents

Windows Vista, XAML, User interface markup language, Windows Presentation Foundation, Windows API, Windows Presentation Foundation, Cairo (graphics), Anders Hejlsberg, Wikipedia: Layout engine

My Related Documents

C#, .Net Framework: XAML Menu Throbbing!, C#, .Net Framework: Changing Styles with the times (Answers and Thoughts), C#, .Net Framework: XAML Menu Throbbing! (Answers to Questions), C#, .Net Framework: XAML Menu Example, C#, .Net Framework: Programming Windows Presentation Foundation (WPF), C#, .Net Framework: DoubleAnimation Crashes XAMLPad (MayCTP): Some Answers To Questions

Related Amazon Books

Windows API Bible: (UK)/(USA), Windows Forms Programming in C#: (UK)/(USA), Programming Windows Presentation Foundation: (UK)/(USA), Essential .Net Volume 1: (UK)/(USA), Mastering Visual Studio.NET: (UK)/(USA)

Related Images