Equivalent of CSS in XAML

Question

In web development, styles sheets are very commonly used. In Swing there are layout managers for handling of the GUI. Am I correct in the assumption that XAML applies one of those paradigms? Both? Which one is preferred in such case?

I've checked Intellisense but except for the Style field, I didn't find anything particularly obvious and I'm unclear what keywords to google for. Suggestions?

Answer 1

What you're looking for is ResourceDictionary. This is much more flexible than just putting styles in your App.Resources Element and gives you much more control of the scope of your styles.

Putting Styles in your App.Resources has a number of disadvantages:

• It can fill up really quickly and turn into a large, bloated list
• Every style there is globally available. You may not want that.

Using A ResourceDictionary largely fixes this:

• Styles can be kept in one or more assemblies and be re-used across appplications
• By including resourcedictionaries (or not) you can control what styles are added to a page
• You can group and organise your styles and templates in a way that is logical to you

A resource dictionary maps pretty closely to a CSS file. Basically, you use these to store a mix of things:

• Styles
• ControlTemplates and DataTemplates
• Brushes, etc

And, like stylesheets you can apply them across entire control types or to controls that use the named style

<UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Project.Ui;component/Styles/DialogStyles.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/Project.Ui;component/Icons/Error.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/Project.Ui;component/Icons/Exit.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/Project.Ui;component/Icons/Warning.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
</UserControl.Resources>

Definining a ResourceDictionary:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                        xmlns:sys="clr-namespace:System;assembly=mscorlib"
                        xmlns:Infrastructure="clr-namespace:Hsbc.Ice.Shell.Infrastructure"
                        xmlns:Ui="clr-namespace:Hsbc.Ice.Shell.Infrastructure.Ui">

        <LinearGradientBrush x:Key="{x:Static Ui:Brushes.SelectedRowBackgroundBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1" 
                                 po:Freeze="True">
            <GradientStop Color="#4D5F6E96" Offset="0"/>
            <GradientStop Color="#2191A0BE" Offset="0.2"/>
            <GradientStop Color="#2191A0BE" Offset="0.45"/>
            <GradientStop Color="#745F6E96" Offset="1"/>
        </LinearGradientBrush>
    </ResourceDictionary>

Answer 2

Better way to store style as a resource in the assembly so that it can be available in multiple files as css

you can check : Silverlight and styles

Also check : How to set Silverlight Control Styles via Application.Resources

put style like this in Application.Xaml file or create new one for you

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="AppResStyle.App"
             >
    <Application.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="BorderBrush" Value="Green" />
            <Setter Property="Foreground" Value="Blue" />
     </Style>
    </Application.Resources>
</Application>

Now you can utilize like this in multiple uercontrol to assign style to button

<UserControl x:Class="AppResStyle.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="130" Height="80">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Button1" Height="75" Width="125" Style="{StaticResource ButtonStyle}" />
    </Grid>
</UserControl>