Example "Create your own WPF element using Style and a new xaml file. The new element is: at the top Title, at the bottom the text in the frame. Using Binding | C# WPF application
last updated: 23 October 2023
Step 1. Creating a new project
Step 2. Create a new folder
Create a new folder MyLibrary like this:
A folder has been created
Step 3. Create a new file MyControls.xaml
Step 4. Add the code to the MyControls.xaml file
Xaml
Файл MyControls.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Thickness x:Key="Header.Content.GroupBox.Margin" >4</Thickness>
<Style x:Key="Header.Content.GroupBox" TargetType="{x:Type GroupBox}" >
<Setter Property="BorderBrush" Value="#CC0078D7" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="7" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}" >
<!-- grid with 2 rows -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- first row it is Title -->
<Border Background="{TemplateBinding BorderBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" >
<TextBlock
Text="{TemplateBinding Header}"
Margin="{TemplateBinding Margin}"
FontSize="{TemplateBinding FontSize}" >
</TextBlock>
</Border>
<!-- second row it is Content -->
<Border Grid.Row="1"
Background="White"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" >
<ItemsControl ItemsSource="{TemplateBinding Content}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding}"
Foreground="Black"
Margin="{Binding Path=Margin, RelativeSource={RelativeSource AncestorType={x:Type GroupBox}}}"
FontSize="{Binding Path=FontSize, RelativeSource={RelativeSource AncestorType={x:Type GroupBox}}}" >
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Step 5. Add the code to the MainWindow.xaml file
Xaml
Файл MainWindow.xaml
<Window x:Class="WpfAppTitleContentWithBorder.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:WpfAppTitleContentWithBorder"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" >
<!-- add my library -->
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyLibrary/MyControls.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<!-- display my control -->
<GroupBox Style="{StaticResource Header.Content.GroupBox}"
Width="300"
Height="200"
Header="{Binding MyTitle}"
Content="{Binding MyNews}"
FontSize="22" >
</GroupBox>
</Grid>
</Window>
Step 6. Add the code to the MainWindow.xaml.cs file
C#
Файл MainWindow.xaml.cs
using System.Windows;
namespace WpfAppTitleContentWithBorder
{
public partial class MainWindow : Window
{
public string MyTitle { get; set; }
public string [] MyNews { get; set; }
public MainWindow()
{
InitializeComponent();
// for binding
DataContext = this;
// my data
MyTitle = "My news" ;
MyNews = new string [] { "Today weather is fine" , "I am eating" };
}
}
}
Run (Ctrl-F5 or Run) and see the result
Download the example
Accordingly, the conclusion:
The result is a new element based on GroupBox .
Attributes used from GroupBox
If we want to use our own attributes (our new names), then we need to create a full-fledged new element, this is described in the next topic.