How to create custom button from custom control? - wpf

Question

I'm testing some codes about custom control. I had the following styles defines in Themes folder.LayerGrid.xaml.A button with an image and text. This PanelButtonStylestyle is used in layergrid.cs.
<Style TargetType="{x:Type common:LayerGrid}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" LastChildFill="True"
Name="PART_ParentPanel">
<DockPanel.Resources>
<Style x:Key="PanelButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Focusable" Value="False"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="BorderPath" Margin="0"
BorderThickness="0" Background="{StaticResource TabItemBackgroundBrushUnselected}"
BorderBrush="{StaticResource TabItem_BorderBrush_Selected}">
<StackPanel Orientation="Horizontal">
<Image Source="/MCLF;component/Images/图像 3.png" Width="15" Height="15"
HorizontalAlignment="Center " VerticalAlignment="Center"></Image>
<TextBlock TextTrimming="CharacterEllipsis"
Text ="{TemplateBinding Name}"></TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DockPanel.Resources>
<StackPanel Name="PART_BottomCntl" Orientation="Horizontal" DockPanel.Dock="Bottom" Background="AliceBlue"></StackPanel>
<StackPanel Name="PART_LeftCntl" Orientation="Horizontal" DockPanel.Dock="Left" Background="AliceBlue">
<StackPanel.LayoutTransform>
<RotateTransform Angle="90"/>
</StackPanel.LayoutTransform>
</StackPanel>
<StackPanel Name="PART_RightCntl" Orientation="Horizontal" DockPanel.Dock="Right" Background="AliceBlue">
<StackPanel.LayoutTransform>
<RotateTransform Angle="90"/>
</StackPanel.LayoutTransform>
</StackPanel>
<Grid Name="PART_MasterGrid" IsSharedSizeScope="True" Background="AliceBlue"></Grid>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
private Button AddToColumnStackPanel(Layer layer)
{
var btn = new Button
{
//Background = Brushes.Transparent,
//BorderBrush = Brushes.Transparent,
//BorderThickness = new Thickness(0),
//Height = 22,
//MinWidth = 55.0,
Padding = new Thickness(10, 0, 10, 0),
//FontWeight = FontWeights.Bold,
Style = (Style)PART_MasterGrid.FindResource("PanelButtonStyle"),
};
btn.Click += (o, e) =>...
}
And the DP Layer.Name is determined in MainWindow.xaml with
<controls:Layer Level="1" Orientation="Column" Name="Symbols" ColumnLocation="Left">
<controls:Layer.Content>
<Grid>
<Grid.DataContext>
<vm:MainViewModel/>
</Grid.DataContext>
</Grid>
</controls:Layer.Content>
Now the problem is the DP Name=Symbols is not bind correctly into the button PanelButtonStyle
I read a similar post but that example set the whole target type to the DP somecustomControlWPF Custom Control: TemplateBinding to Image
Update: The DP Name is in class Layer,which is used to define the properties of each layer's location, orientation, name, content etc... The class LayerGrid serves as the class backing the custom control.
In LayerGrid.cs we have:
public class LayerGrid : ContentControl
{
...
}
public class Layer : UIElement
{
public enum LayerOrientation
{
Row,
Column
}
public enum LayerColumnLocation
{
Left,
Right
}
public static readonly DependencyProperty LevelProperty;
public static readonly DependencyProperty ContentProperty;
public static readonly DependencyProperty OrientationProperty;
public static readonly DependencyProperty NameProperty;
public static readonly DependencyProperty ColumnLocationProperty;
public string Name
{
get { return (string)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
static Layer()
{
NameProperty = DependencyProperty.Register(
"Name",
typeof(string),
typeof(Layer));
...
}
}
And LayerGrid.xaml serves the purpose of laying out the general panels; Each button will be added to the corresponding stackPanel such as PART_LeftCntl by calling the function above.
<DockPanel>
<StackPanel Name="PART_BottomCntl" Orientation="Horizontal" DockPanel.Dock="Bottom" Background="AliceBlue"></StackPanel>
<StackPanel Name="PART_LeftCntl" Orientation="Horizontal" DockPanel.Dock="Left" Background="AliceBlue">
<StackPanel.LayoutTransform>
<RotateTransform Angle="90"/>
</StackPanel.LayoutTransform>
</StackPanel>
<StackPanel Name="PART_RightCntl" Orientation="Horizontal" DockPanel.Dock="Right" Background="AliceBlue">
<StackPanel.LayoutTransform>
<RotateTransform Angle="90"/>
</StackPanel.LayoutTransform>
</StackPanel>
<Grid Name="PART_MasterGrid" IsSharedSizeScope="True" Background="AliceBlue"></Grid>
</DockPanel>
And MainWindow.xaml is responsible for giving the contents inside;
Update2 Below an example of the same style is attached.Only Buttonstyle is changed.https://www.dropbox.com/sh/os34tr8zl21uj4o/AAC_segoCWzAbJMFzCKHyZnpa?dl=0
//var btn = new Button
//{
// Background = Brushes.Transparent,
// BorderBrush = Brushes.Transparent,
// BorderThickness = new Thickness(0),
// Height = 22,
// MinWidth = 65.0,
// Padding = new Thickness(10, 0, 15, 0),
// FontWeight = FontWeights.Bold,
// Style = (Style)PART_MasterGrid.FindResource("buttonStyle"),
// Content = layer.Name
//};
var btn = new Button
{
Padding = new Thickness(10, 0, 10, 0),
//FontWeight = FontWeights.Bold,
Style = (Style)PART_MasterGrid.FindResource("PanelButtonStyle")
//Content = layer.Name
};

Answer 1

I think you are looking for how to create the binding in code behind.
So this should work for you
Binding b = new Binding("Name");
b.Source = layer;
btn.SetBinding(Button.ContentProperty, b);
so remove Content = layer.Name & add this code before btn.Click += (o, e) =>...
give it a try and see if this is what you are looking for
EDIT
After looking at your implementation I found that the buttons are directly added to parts (StackPanel) of the layered grid template instead of layer (see below). So Relative source may not help here.
However, there are ways how you can achieve your goal in this scenario. As an easy option you can leverage Content property of Button.
So start by binding the Text property it to the template's Content property
<TextBlock TextTrimming="CharacterEllipsis" FontSize="10"
Text ="{TemplateBinding Content}"></TextBlock>
then in the code you can simply use Content = layer.Name if the Name is not supposed to change.
eg
var btn = new Button
{
Padding = new Thickness(10, 0, 10, 0),
Style = (Style)PART_MasterGrid.FindResource("PanelButtonStyle"),
Content = layer.Name
};
Or alternatively you can bind Name with Content property to reflect the changes if needed.
eg
var btn = new Button
{
Padding = new Thickness(10, 0, 10, 0),
Style = (Style)PART_MasterGrid.FindResource("PanelButtonStyle")
};
Binding b = new Binding("Name");
b.Source = layer;
btn.SetBinding(Button.ContentProperty, b);
Let me know if this helps.