We Keep Coding

C# WPF Button Style Template Not Showing Background Image

I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.
The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.
The code I have generated is below :-
<Window x:Class="SkinningDemo.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:SkinnigDemo"
mc:Ignorable="d"
Title="DemoWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MainButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF266C38"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button2.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#220A88"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="Home">
<Grid.Background>
<SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
<TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
<Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
</Button>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
<Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
<Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
</Grid>
</Window>
As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-
<Button x:Name="Button1" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
<Button.Background>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Button.Background>
</Button>
Thanks in anticipation of the help.

Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.
If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:
<Border Name="border"
Background="{TemplateBinding Background}"
BorderThickness="0">

xaml(wpf) How to address a control from my customwindow template?

I've created a customwindow template by redefining it, and inheriting from window. This template resides in a separate class library, and i build a dll and reference it from my main project.
This is a part of code from custom window xaml:
<!-- Window style -->
<Style TargetType="{x:Type local:CustomWindow}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Background" Value="White"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="Opacity" Value="1" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Silver"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomWindow}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="moveRectangle" Fill="#24282A"
Grid.Row="0" Grid.Column="1"/>
<Label x:Name="WindowName" Background="#24282A" Foreground="White" Grid.Row="0" Grid.Column="0"/>
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" Background="#24282A">
<Button x:Name="minimizeButton" Style="{StaticResource WindowButtonStyle}"
Content="0" />
<Button x:Name="restoreButton" Style="{StaticResource WindowButtonStyle}"
Content="1" />
<Button x:Name="closeButton" Style="{StaticResource WindowButtonStyle}"
Content="r" />
</StackPanel>
<Grid Background="#24282A" Opacity="0.9"
Grid.Row="1" Grid.ColumnSpan="3" Margin="5,0,5,5">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</Grid>
<Grid x:Name="resizeGrid">
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
VerticalAlignment="Top"
Height="5"
x:Name="top"
Margin="5,0,5,0" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
x:Name="bottom"
Height="5"
VerticalAlignment="Bottom"
Margin="5,0,5,0" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
HorizontalAlignment="Left"
Margin="0,5,0,5"
Width="5"
x:Name="left"/>
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
Margin="0,5,0,5"
Width="5"
HorizontalAlignment="Right"
x:Name="right" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Width="5"
Height="5"
x:Name="bottomLeft" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
VerticalAlignment="Bottom"
Height="5"
Width="5"
HorizontalAlignment="Right"
x:Name="bottomRight" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
HorizontalAlignment="Right"
Width="5"
Height="5"
VerticalAlignment="Top"
x:Name="topRight" />
<Rectangle
Stroke="{x:Null}"
Fill="#24282A"
HorizontalAlignment="Left"
Width="6"
VerticalAlignment="Top"
Height="5"
x:Name="topLeft" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, there is a label called "WindowName". i want this label to be kind of Title bar in my custom window, and i wanna call it's property content from my main wpf application which inherits from this custom window. Everything works ok, except i have no idea how i should call this label to set it's content. Any help would be appreciated

You would want to bind the content of that Label to the Title property of the base Window class since the base class already has a dependency property that you can just reuse. All you will need to do is update the xaml for you label component as below:
<Label x:Name="WindowName" Content={TemplateBinding Title} Background="#24282A" Foreground="White" Grid.Row="0" Grid.Column="0"/>
You could also override OnApplyTemplate in your CustomWindow and use a method like FindName to get the Label using its name and then updating it through a direct reference, but the binding way is much cleaner so I wouldn't consider that route although I wanted to at least mention it.

How to appose WrapPanel items of different heights (vertically)?

This is how it looks like right now:
and this is how I'd like to have it:
As shown the tiles should be apposed as densely as possible with only a set margin between them.
And here's my code:
<Grid Background="Gray">
<TextBox x:Name="BoardNameTextBox" HorizontalAlignment="Left" Height="23" Margin="40,3,0,0" TextWrapping="Wrap" Text="pol" VerticalAlignment="Top" Width="120"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="491,3,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<Grid Margin="0,30,0,0" Background="WhiteSmoke">
<WrapPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<WrapPanel.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="3" />
<Setter Property="Fill" Value="#4DB4DD" />
</Style>
</WrapPanel.Resources>
<Rectangle Width="150" />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="200"/>
<Rectangle Height="25"/>
<Rectangle Height="40"/>
<Rectangle />
<Rectangle Width="220"/>
<Rectangle Height="30"/>
<Rectangle Height="30"/>
<Rectangle Width="150" />
<Rectangle />
</WrapPanel>
</Grid>
</Grid>
The code is of course a sample code for my particular problem - later on it should just be a wrap panel (or any other control) with the items (which are custom controls) added programmatically (like "WrapPanel1.Children.Add(r);"). I hope the images are self-explanatory.

What you are looking for is called cascading layout.it has a very popular implementation in javascript called Masonry which has a WPF counterpart known as WPF-Masonry .check preceding links for detail and demo.

UserControl with Bounding Box Scaling Point boxes

I want to make a UserControl like this image;
There are 9 boxes, top one is for rotating, while other one is for scaling purposes. I tried to make this with grid and background image, 2 rows, and small boxes with StackPanel, but have to provide lots of negative and positive margins to achieve this result. Is there any easy way to do so need help.
Thanks.

Something like this?
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="Height" Value="11"/>
<Setter Property="Width" Value="11"/>
<!-- For hittestvisibility -->
<Setter Property="Fill" Value="Transparent"/>
</Style>
</Grid.Resources>
<Line X1="0" Y1="1" X2="0" Y2="0" Stretch="Fill" Stroke="Black" />
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Grid Grid.Row="1" Height="200" Width="200" Margin="-5">
<Rectangle Margin="5" Height="Auto" Width="Auto" Fill="{x:Null}"/>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Right"/>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<!-- The Content -->
<Rectangle Width="Auto" Height="Auto" Margin="20" Fill="Green"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
Text="Content"/>
</Grid>
</Grid>
The terminology is Bounding Box

How do I override a property in a ControlTemplate?

I have the following XAML:
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="227" Width="391">
<Window.Resources>
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="Red" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
</Grid>
</Window>
Because of Fill="Red", obviously all buttons will have a red fill/background color. I want to use this template for several buttons, but each of them with a different fill color, known at design time. Setting the background color has no effect, so I have to change the Fill color, but I can't define the Path property again in the actual button definitions. How do I access and override this property in the XAML?

Don´t use the template directly. Assign a Style and use that.
i.e.
<Style x:Key="PentagonButton" TargetType="{x:type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use it like this:
<Grid>
<Button Content="red" Margin="12,19,0,0" Style="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Style="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" Background="Blue" />
</Grid>

Use TemplateBinding to change the values of your templates in the xaml of its controls:
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
Your button:
<Button Background="Red" Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Background="Blue" Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />