locked
How to reuse XAML code in your XAML page? RRS feed

  • Question

  • See the below.  I want to reuse the stuff in yellow highlight. Can I name it something and then where do I put it, at the top of the page?  That way I don't keep having to retype this stuff.

    Thank you.


    <
    Window x:Class="WpfApplication1.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Window1" Height="300" Width="500">

        <Grid x:Name="myGrid1">

            <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

             <ColumnDefinition Width="*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <!-- comment here -->

            <Grid Grid.Column="0">

                <Grid.RowDefinitions>

                    <RowDefinition></RowDefinition>

                    <RowDefinition></RowDefinition>

                </Grid.RowDefinitions>

                <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Vertical">

                       <TextBlock x:Name="myTextBlock001" Text="Hi001" Foreground="Blue" Margin="3"></TextBlock>

                </StackPanel>

            </Grid>

         

            <Grid Grid.Column="1">

                <Grid.RowDefinitions>

                    <RowDefinition></RowDefinition>

                    <RowDefinition></RowDefinition>

                </Grid.RowDefinitions>

                <StackPanel Grid.Column="1" Grid.Row="1">

                    <Button x:Name="cmdClickMe" Content="Click Me!" Foreground="{x:Static SystemColors.ActiveCaptionBrush}" Click="cmdClickMe_Click" ></Button>

                    <TextBlock x:Name="myTextBlock1" TextWrapping="Wrap" Text="Hi" ></TextBlock>

                </StackPanel>

            </Grid>

            <Grid Grid.Column="2">

                <Grid.Background>

                    <LinearGradientBrush x:Name="myLinearGradBrush01">

                        <LinearGradientBrush.GradientStops>

                            <GradientStop Offset="0.00" Color="Yellow"></GradientStop>

                            <GradientStop Offset="0.50" Color="LightBlue"></GradientStop>

                            <GradientStop Offset="1.00" Color="GhostWhite"></GradientStop>

                            </LinearGradientBrush.GradientStops>

                 </LinearGradientBrush>

                </Grid.Background>

                <StackPanel Orientation="Horizontal">

                    <TextBlock x:Name="myTextBlock2" Text="Hi2" Foreground="Black" Margin="3"></TextBlock>

                    <TextBlock x:Name="myTextBlock3" Text="Hi3" Foreground="Blue" Margin="3"></TextBlock>

                </StackPanel>

            </Grid>

     

        </Grid>

    </Window>

     

    Monday, August 31, 2009 7:03 PM

Answers

  • Hi,
           You can create a brush resource for it. Steps for doing this:

    1. Select the last grid in "Objects and Timeline" panel in Blend
    2. Search "Background" in the property pane
    3. Click on "Advanced Property Options" for Background property

    4. Click on Convert to new Resource
    [Now you have options to create resource at Application scope (App.xaml) / local to document (This Document) or in an External Resource Dictionary]

    5. Select appropriate option and click ok
    [Now you will see that the Background property of grid is binded to a brush resource and you can reuse this brush resource whereever required.]

    Hope this solves your problem.

    Thanks,
    Navit Saxena
    • Proposed as answer by navits - MSFT Monday, August 31, 2009 10:01 PM
    • Marked as answer by RonConger09 Sunday, September 6, 2009 7:13 PM
    Monday, August 31, 2009 7:22 PM

All replies

  • Hi,
           You can create a brush resource for it. Steps for doing this:

    1. Select the last grid in "Objects and Timeline" panel in Blend
    2. Search "Background" in the property pane
    3. Click on "Advanced Property Options" for Background property

    4. Click on Convert to new Resource
    [Now you have options to create resource at Application scope (App.xaml) / local to document (This Document) or in an External Resource Dictionary]

    5. Select appropriate option and click ok
    [Now you will see that the Background property of grid is binded to a brush resource and you can reuse this brush resource whereever required.]

    Hope this solves your problem.

    Thanks,
    Navit Saxena
    • Proposed as answer by navits - MSFT Monday, August 31, 2009 10:01 PM
    • Marked as answer by RonConger09 Sunday, September 6, 2009 7:13 PM
    Monday, August 31, 2009 7:22 PM
  • Thanks.  I could not replicate this in Blend 2 (I could not find the "Background" in the property page of the grid in question), but I did find this link to do this programically (which is how I mainly design XAML pages, along with hard coding them): http://msdn.microsoft.com/en-us/library/ms750613.aspx 

    For example, you would put, just after the Window section in XAML and before the 'grid' (or 'canvas' or whatever your main element is) something like:

    <

     

    Window.Resources>

     

     

    <SolidColorBrush x:Key="MyGoldOpaqueBrush" Color="Gold" Opacity="0.5" />

     

     

    <LinearGradientBrush x:Key="myLinearGradBrush01LGB">

                        <LinearGradientBrush.GradientStops>

                            <GradientStop Offset="0.00" Color="Yellow"></GradientStop>

                            <GradientStop Offset="0.50" Color="LightBlue"></GradientStop>

                            <GradientStop Offset="1.00" Color="GhostWhite"></GradientStop>

                            </LinearGradientBrush.GradientStops>

                 </LinearGradientBrush>
    </

     

    Window.Resources>

    Note the use of ".Key" not .Name when putting these in your resource file. 

    Then, later on in your XAML code you would write, to reference these:

    <

     

    Grid Grid.Row="3" Grid.Column="0" Background="{StaticResource MyGoldOpaqueBrush}"></Grid>

    or,

    <

     

    Grid Grid.Row="3" Grid.Column="1" Background="{StaticResource myLinearGradBrush01LGB}"></Grid>

    etc. 

    This works.

    It's also a bit strange but apparently certain colors do not work with GradientStop, but that's a topic for another day.

    Sunday, September 6, 2009 7:23 PM