Can I make this block of XAML into a reusable "control"?

Question

I have a Grid, and in that grid, I have this:

<StackPanel Grid.Row="2"
            Grid.Column="0">
    <Grid x:Name="GridButtonItem" Margin="30,0,0,5">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background"
                Value="Transparent" />
            <Style.Triggers>
            <Trigger Property="IsMouseOver"
                 Value="True">
                <Setter Property="Background"
                    Value="#332a8dd4" />
            </Trigger>
            <Trigger Property="IsMouseOver"
                 Value="False">
                <Setter Property="Background"
                    Value="Transparent" />
            </Trigger>
            </Style.Triggers>
        </Style>
        </Grid.Style>
        <Image Grid.Row="0"
           Grid.RowSpan="2"
           Grid.Column="0"
           Margin="3"
           Source="{dx:DXImageOffice2013 Image=Windows_32x32.png}"
           HorizontalAlignment="Center"
           VerticalAlignment="Center" />
        <TextBlock Grid.Row="0"
               Grid.Column="1"
               Margin="10,3,3,0"
               Text="Application Log" />
        <TextBlock Grid.Row="1"
               Grid.Column="1"
               Margin="10,0,3,3"
               Text="C:\Program Files (x86)\ATI Technologies\ATI.ACE\MOM-InstallProxy" />
    </Grid>
</StackPanel>

The StackPanel is actually meant to hold many of the GridButtonItem items. Is there a way that I can somehow make a "template" of GridButtonItem and then for each one I want to add to the StackPanel, just set the Image and Text properties?

Something like this (just pseudo-code for demonstration):

<StackPanel>
    <Grid Template="myGridItemTemplate">
        <Setter Property="Image" Value="img1.png"/>
        <Setter Property="Text1" Value="button1 Text"/>
        <Setter Property="Text2" Value="button2 Text"/>
    </Grid>
    <Grid Template="myGridItemTemplate">
        <Setter Property="Image" Value="img1.png"/>
        <Setter Property="Text1" Value="button1 Text"/>
        <Setter Property="Text2" Value="button2 Text"/>
    </Grid>
    <Grid Template="myGridItemTemplate">
        <Setter Property="Image" Value="img1.png"/>
        <Setter Property="Text1" Value="button1 Text"/>
        <Setter Property="Text2" Value="button2 Text"/>
    </Grid>
</StackPanel>

So each one that is added picks up the row/column definitions, and an embedded Image and two TextBlocks. Then I just set the three properties for each one added.

Is this possible?

Answer 1

You could do this with a UserControl (two different ways) or a DataTemplate. Let's go with DataTemplate, because stuicidle already ably demonstrated one UserControl approach.

There are a couple of different ways to do this with a DataTemplate, too.

We're going to do something called an implicit DataTemplate. It's created in Resources, but it has no x:Key property, just a DataType="{x:Type local:GridItemViewModel}" property. What that will do is this: Wherever that DataTemplate is in scope, whenever XAML needs to display a GridItemViewModel and nothing is specifying a template to display it in, it'll use that implicit template.

Clear as mud! Welcome to the XAML learning curve.

ViewModels.cs

using System;
using System.ComponentModel;
using System.Windows.Media;

namespace GridItemAnswer
{
    #region ViewModelBase Class
    public class ViewModelBase : INotifyPropertyChanged
    {
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propName = null) =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        #endregion INotifyPropertyChanged
    }
    #endregion ViewModelBase Class

    #region GridItemViewModel Class
    public class GridItemViewModel : ViewModelBase
    {
        #region LabelText Property
        private String _labelText = null;
        public String LabelText
        {
            get { return _labelText; }
            set
            {
                if (value != _labelText)
                {
                    _labelText = value;
                    OnPropertyChanged();
                }
            }
        }
        #endregion LabelText Property

        #region Path Property
        private String _path = null;
        public String Path
        {
            get { return _path; }
            set
            {
                if (value != _path)
                {
                    _path = value;
                    OnPropertyChanged();
                }
            }
        }
        #endregion Path Property

        #region ImageSource Property
        private ImageSource _imageSource = null;
        public ImageSource ImageSource
        {
            get { return _imageSource; }
            set
            {
                if (value != _imageSource)
                {
                    _imageSource = value;
                    OnPropertyChanged();
                }
            }
        }
        #endregion ImageSource Property
    }
    #endregion GridItemViewModel Class
}

MainWindow.xaml

<Window 
    x:Class="GridItemAnswer.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:GridItemAnswer"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    >
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:GridItemViewModel}">
            <StackPanel>
                <Grid x:Name="GridButtonItem" Margin="30,0,0,5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.Style>
                    <Style TargetType="{x:Type Grid}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#332a8dd4" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    </Grid.Style>
                    <Image 
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        Grid.Column="0"
                        Margin="3"
                        Source="{Binding Image}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" 
                        />
                    <TextBlock 
                        Grid.Row="0"
                        Grid.Column="1"
                        Margin="10,3,3,0"
                        Text="{Binding LabelText}"
                        />
                    <TextBlock 
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="10,0,3,3"
                        Text="{Binding Path}"
                        />
                </Grid>
            </StackPanel> 
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <ItemsControl>
                <local:GridItemViewModel
                    LabelText="Foo Bar"
                    Path="c:\foo\bar"
                    />
                <local:GridItemViewModel
                    LabelText="Baz Planxty"
                    Path="c:\baz\planxty"
                    />
            </ItemsControl>
            <Label>
                <local:GridItemViewModel
                    LabelText="A frog walks into a bank asking for a loan"
                    Path="c:\knick\knack"
                    />
            </Label>
        </StackPanel>
    </Grid>
</Window>

Answer 2

You can put your grid control into a UserControl and then reuse the UserControl throughout your project. I have a simple example of doing this with a label and Textbox.

here is the XAML:

<UserControl x:Class="TestVision.CustomControls.LabelAndTextbox"
             x:Name="parent"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TestVision.CustomControls"
             mc:Ignorable="d" >
    <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=parent}">
        <TextBlock Text="{Binding Path=Label}" Width="{Binding Path=LabelWidth}" VerticalAlignment="Center" TextAlignment="Right" Margin="0,0,10,0" Height="22"/>
        <TextBox Text="{Binding Path=Text, UpdateSourceTrigger=PropertyChanged}" Width="{Binding Path=TextboxWidth}" IsReadOnly="{Binding Path=TextboxReadOnly, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalContentAlignment="{Binding Path=TextboxHorizontalContentAlgnment}"/>
    </StackPanel>
</UserControl>

Any properties that you want to be able to set e.g. your image text etc. must be bound to Dependency Properties in the code behind. Code behind:

 public partial class LabelAndTextbox : UserControl
    {
        /// <summary>
        /// Gets or sets the Label which is displayed next to the field
        /// </summary>
        public String Label
        {
            get { return (String)GetValue(LabelContent); }
            set { SetValue(LabelContent, value); }
        }

        /// <summary>
        /// Identified the Label dependency property
        /// </summary>
        public static readonly DependencyProperty LabelContent =
            DependencyProperty.Register("Label", typeof(string),
              typeof(LabelAndTextbox), new PropertyMetadata(""));

        public object Text
        {
            get { return (object)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }


        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(object),
              typeof(LabelAndTextbox), new PropertyMetadata(null));

        public Double LabelWidth
        {
            get { return (Double)GetValue(LabelWidthProperty); }
            set { SetValue(LabelWidthProperty, value); }
        }

        public static readonly DependencyProperty LabelWidthProperty =
            DependencyProperty.Register("LabelWidth", typeof(Double),
                typeof(LabelAndTextbox), new PropertyMetadata());

        public Double TextboxWidth
        {
            get { return (Double)GetValue(TextboxWidthProperty); }
            set { SetValue(TextboxWidthProperty, value); }
        }

        public static readonly DependencyProperty TextboxWidthProperty =
           DependencyProperty.Register("TextboxWidth", typeof(Double),
                 typeof(LabelAndTextbox), new PropertyMetadata());

        public bool TextboxReadOnly
        {
            get { return (bool)GetValue(TextboxReadOnlyProperty); }
            set { SetValue(TextboxReadOnlyProperty, value); }
        }


        public static readonly DependencyProperty TextboxReadOnlyProperty =
            DependencyProperty.Register("TextboxReadOnly", typeof(bool),
              typeof(LabelAndTextbox), new FrameworkPropertyMetadata());

        public HorizontalAlignment TextboxHorizontalContentAlgnment
        {
            get { return (HorizontalAlignment)GetValue(TextboxHorizontalContentAlgnmentProperty); }
            set { SetValue(TextboxHorizontalContentAlgnmentProperty, value); }
        }


        public static readonly DependencyProperty TextboxHorizontalContentAlgnmentProperty =
            DependencyProperty.Register("TextboxHorizontalContentAlgnment", typeof(HorizontalAlignment),
              typeof(LabelAndTextbox), new FrameworkPropertyMetadata());

        public LabelAndTextbox()
        {
            InitializeComponent();
        }
    }

you then will need to add a reference in the XAML file to your UserControl like this:

xmlns:Resource="clr-namespace:ProjectNamespace.FolderContainingYourControl"

Resource is a generic identifier you can call it what you like, you can then reference your control in the like this:

 <Resource:LabelAndTextblock x:Name="AddressLine1" Label="{Binding LblTxt_AddressLine1}" Text="{Binding AddressLine1, Mode=TwoWay}" Margin="10,5,0,5" LabelWidth="70" TextWidth="250" TextHeight="60"/>