We Keep Coding

Dynamic property of a text box within a button using a button template

I have a few buttons to set up in C# WPF, and I like to use a button template.
I can set the template and then use it in my grid, but how do I change the text of the TextBox per button and also other properties like the color of the rectangle?
Here is my template:
<Window.Resources>
<ControlTemplate x:Key="menuButton_Type1" TargetType="Button">
<Grid >
<Rectangle x:Name="Normal" Fill="#FFFDC776" HorizontalAlignment="Left" Height="25" Width="82" RadiusX="7" RadiusY="7"/>
<Rectangle x:Name="Pressed" Fill="White" HorizontalAlignment="Left" Height="25" Width="82" RadiusX="7" RadiusY="7" Visibility="Hidden"/>
<Rectangle x:Name="Disable" Fill="#FF707070" HorizontalAlignment="Left" Height="25" Width="82" RadiusX="7" RadiusY="7" Visibility="Hidden"/>
<Border Width="82" Height="25" Padding="0,0,5,0">
<TextBlock Text="EXIT" FontFamily="{StaticResource Swiss911}" FontSize="18" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Pressed" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Disable" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
I use the template button in my XAML grid like this:
<Grid>
<Button Template="{StaticResource menuButton_Type1}" Margin="18,226,-18,-226" />
</Grid>
I would like to change the text of the TextBlock currently set to "EXIT" and also the color of one of the Rectangle, in this case the normal one. How do I do this?
I tried to use dynamic properties, but that did not work for me.

I found your answer on these pages:
What is the template binding vs binding?
TemplateBinding Markup Extension
You can simply put the binding to the Text property of TextBlock on your ControlTemplate.
You should add the Content property of the button to TextBlock's text property:
<TextBlock Text="{TemplateBinding Content}" FontFamily="{StaticResource Swiss911}" FontSize="18" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
Then you can set the content property of Button, the Content property of Button will be passing to the your TextBlock's Text property.
<Button Template="{StaticResource menuButton_Type1}" Content="Exit" Margin="100" />
I tested with these Buttons:
<Button Template="{StaticResource menuButton_Type1}" Content="Exit" Margin="0,0,0,0" />
<Button Template="{StaticResource menuButton_Type1}" Content="Close" Margin="100,0,0,0" />
<Button Template="{StaticResource menuButton_Type1}" Content="Open" Margin="200,0,0,0" />

change button color when click on each button

this code is not working. I want to add button group instead radio button.. there is three buttons. all three buttons are same color(blue). when user click on 1st button it will change that button color as red. But when user click on second button, first button must turn into blue color and clicked button(2nd button) must turn in to red. In my code that's not change. this is my code. please Help me
<UserControl>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl>
<Button Command="{Binding LanguageChangeCommand}" CommandParameter="English" Content="English" Width="80" Grid.Column="2" Grid.Row="3" Margin="8,15,162,21" Grid.ColumnSpan="2" />
<Button Command="{Binding LanguageChangeCommand}" CommandParameter="Sinhala" Content="සිංහල" Width="80" Grid.Column="3" Grid.Row="3" Margin="78,15,77,21" />
<Button Command="{Binding LanguageChangeCommand}" CommandParameter="Tamil" Content="தமிழ்" Width="80" Grid.Column="3" Grid.Row="3" Margin="165,15,10,21" Grid.ColumnSpan="2"/>

In WPF Only icon of a button is click able not whole of the button

I am trying to make a costume button in c# wpf. I used material design themes for inserting an icon inside the button but when I run the program, only the icon inside the button is click able not the whole button. what should I do to fix this?
I did this for button style:
<Application.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
here is the button:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>

Set the Background property to a Brush like for example Transparent instead of setting it to {x:Null}:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0"
Background="Transparent" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>

"Click" effect on a customized button

I was looking over internet for an arrow shaped button. I found this solution:
<Button HorizontalAlignment="Center" Click="Button_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
The problem with this is that, while this is a button that can be clicked, i "lost" the button click effect (i.e the effect that you have when you press the button). Do you know if there is a way to solve my problem?

You need to define this effect yourself in your custom template.
Add an IsPressed trigger that changes some properties of the elements in your template:
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="rect" Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon x:Name="pol" Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="rect" Value="Red"/>
<Setter Property="Fill" TargetName="pol" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>

C# WPF Button should be displayed as selected

I'm using C# WPF Application
I need your help.
If I press on a button it should be selected, but if I now press on another button it should be selected and the other button should not be selected.
It should show where the user is.The button should be selected until another button has been clicked.
But when you go with the mouse over, the normal mouse over effect should come.
<Window x:Name="windowsForm" x:Class="Vorschau.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:Vorschau"
mc:Ignorable="d"
Title="Vorschaukomponente" Height="514.583" Width="805.208" FontFamily="Century Gothic" WindowStartupLocation="Manual" BorderThickness="0" ResizeMode="NoResize" WindowStyle="None" Icon="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinates.ico" Background="{x:Null}" AllowsTransparency="True">
<Window.Resources>
<Style x:Key="border_res" TargetType="{x:Type Border}">
<Setter Property="Background" Value="#3A3A3B" />
<Setter Property="CornerRadius" Value="10" />
</Style>
</Window.Resources>
<Border Style="{StaticResource border_res}">
<Grid>
<Canvas HorizontalAlignment="Left" Height="60" VerticalAlignment="Top" Width="185" Background="#FFE57E31">
<Canvas Height="64" Canvas.Top="451" Width="185" Background="#FF2C373F">
<Label x:Name="lbCopyright" Content="© Name 2017" Canvas.Left="10" Canvas.Top="29" Width="121" Foreground="#FF1B1D1F"/>
</Canvas>
<Canvas Height="391" Canvas.Top="60" Width="185" Background="#FF37424A">
<Button x:Name="btVorschau" Content="Vorschau" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Click="Button_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="btEinstellung" Content="Einstellung" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Canvas.Top="50" Click="btEinstellung_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Canvas>
<Canvas Height="60" Canvas.Left="185" Width="618" Background="#FFEEE9ED">
<Label x:Name="lbClose" Content="X" Canvas.Left="578" FontSize="20" MouseDoubleClick="lbClose_MouseDoubleClick"/>
<Label x:Name="lbMinimize" Content="-" Canvas.Left="556" FontSize="22" Canvas.Top="-2" MouseDoubleClick="lbMinimize_MouseDoubleClick"/>
<Label x:Name="lbWhereIAm" Content="Label" Canvas.Left="10" Canvas.Top="15" Width="162" FontSize="20"/>
</Canvas>
<Canvas x:Name="canvasContent" Height="455" Canvas.Left="185" Canvas.Top="60" Width="618" Background="#FFD1CFD0">
<TabControl x:Name="tabControl" Height="241" Canvas.Left="93" Canvas.Top="87" Width="440" SelectedIndex="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<TabItem x:Name="tabitem1" Header="TabItem">
<Grid Background="#FFE5E5E5">
<Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Margin="99,95,0,0" VerticalAlignment="Top" Background="#FF2387FF"/>
</Grid>
</TabItem>
<TabItem x:Name="tabitem2" Header="TabItem" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Grid Background="#FFE5E5E5">
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" Margin="138,124,0,0" VerticalAlignment="Top" Background="#FFF70000"/>
</Grid>
</TabItem>
</TabControl>
</Canvas>
<Image x:Name="image" Height="38" Canvas.Left="10" Canvas.Top="10" Width="38" Source="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinatesWhite.png"/>
<Label x:Name="lbLogoname" Content="Vorschaukomponente" Canvas.Left="37" Canvas.Top="10" Width="143" FontWeight="Bold" Foreground="White"/>
</Canvas>
</Grid>
</Border>
</Window>

you can use Listbox , to show group of buttons
Solution 1 :
<Style TargetType="{x:Type ListBox}">
<Setter Property="ListBox.ItemTemplate">
<Setter.Value>
<DataTemplate>
<ToggleButton Content="{Binding}"
IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Solution 2
Use radio button change the template
<RadioButton Content="Point" >
<RadioButton.Template>
<ControlTemplate>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>