Question

I have created a button in Expression Blend 4. I want to dynamically create instances of this button at run time.

The code for the button is below:

    <Button Content="Button" HorizontalAlignment="Left" Height="139" Margin="46,107,0,0" VerticalAlignment="Top" Width="412" Grid.ColumnSpan="2">
        <Button.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

In addition to the supplying the code can you put comments in explaining what you are doing so that I can learn the general principle.

I know this is a simple question so I have been reading up places such as: Expression blend & WPF, Is there a way to "extract" WPF controls of Expression Blend?, and http://social.msdn.microsoft.com/forums/en-US/wpf/thread/ffa981b8-9bba-43a2-ab5e-8e59bc10fc0d/ unfortunately none of these have helped.

Answer 1

In your WPF application you should have a App.xaml file, in there you can add Styles that are to be used thoughout your UI.

Example:

<Application x:Class="WpfApplication8.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <!--The style for all your buttons, setting the background property to your custom brush-->
        <Style TargetType="{x:Type Button}"> <!--Indicate that this style should be applied to Button type-->
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
</Application>

Or if you dont want to apply to all buttons, you can give your Style a Key so you can apply to certain Buttons in your UI

<Application x:Class="WpfApplication8.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <!--Add a x:Key value so you can use on certain Buttons not all-->
        <Style x:Key="MyCustomStyle" TargetType="{x:Type Button}"> 
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
</Application>

To use this Style on a Button, just add a binding to the Style property of the Button

  <Button Style="{StaticResource MyCustomStyle}" />

this will apply the Style just to this Button

Or if you really want to do it in code behind you can just add the Brush you want to the background

   Button b = new Button
   {
       Background = new LinearGradientBrush(Colors.Black, Colors.White, new Point(0.5, 1), new Point(0.5, 0))
   };

its very easy to translate xaml to code because xaml uses the exact same property names, like the code brush I posted above:

new LinearGradientBrush(Colors.Black, Colors.White, new Point(0.5, 1), new Point(0.5, 0)) 

is ….

Brush(firstColor,secondColor,StartPoint EndPoint)

Xaml just accesses properties in the button, they will all have the same names in C#.