We Keep Coding

Button Style is not applying XAML

So I have been learning WPF for a little while now and I am starting to use styles to make my forms look a little better.
The issue I am running into is for some reason my button style will not be applied anywhere. I am pretty sure I am overwriting the default button style. All of my other styles are working just fine I just can't figure this one out. Here is my code.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Employee_Time_Entry">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
<ResourceDictionary Source="Fonts.xaml" />
<ResourceDictionary Source="Texts.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Regular button -->
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Background" Value="{StaticResource BackgroundOrangeBrush}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Padding" Value="50 10" />
<Setter Property="Margin" Value="0 10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border"
CornerRadius="10"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the form code where the button will not apply the style.
<Page x:Class="Employee_Time_Entry.Views.Login"
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:Employee_Time_Entry"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500"
Title="Login">
<Border>
<Border.Background>
<ImageBrush ImageSource="/Backgrounds/BlueWaveBackground.jpg"/>
</Border.Background>
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalAlignment="Center">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" >
<Border Background="{StaticResource ForegroundLightBrush}"
CornerRadius="10"
Padding="15 10 15 15"
Width="250"
Margin="50 50 50 0">
<StackPanel>
<TextBlock Text="Sign In" Padding="0 0 0 10" FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="0 10 5 0" Text="User Name:" Style="{StaticResource DefaultTextBox}"/>
<TextBlock HorizontalAlignment="Left" Margin="0 15 5 0" Text="Password:" Style="{StaticResource DefaultTextBox}"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1">
<StackPanel>
<TextBox/>
<PasswordBox/>
<Button Content="Login"
Margin = "10 10"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
Here is a picture of my form

You need to make sure the resource file is referenced either application wide or within the page you want to apply it.
To apply the resources from the file to a specific page, you need to add it to the page resources.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"
x:Name="Dict" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
To apply the resource to your entire application, you would do the same but to your app.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
It should be noted that your button style will not display any content. Your style only has a Border which cannot display content. Make sure you add a ContentPresenter inside of the Button

Bind the style to your button, Like this
<Button Style="{StaticResource /the name of your style here/}" Content="Login" Margin = "10 10"/>
On your button style
<Style TargetType="{x:Type Button}" x:Key="/nameyourstyle/" BasedOn="{StaticResource BaseStyle}">
.....

How to apply App.XAML style to current window

I am trying to apply validation error template and defining style in App.XAML.
<Application x:Class="MY.UI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BP.NES.UI"
>
<Application.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border BorderBrush="#FFCB2E2E" BorderThickness="1" Background="#11FF0000" IsHitTestVisible="False" x:Name="errorBorder"/>
<AdornedElementPlaceholder x:Name="placeholder" />
<Popup AllowsTransparency="True" HorizontalAlignment="Right" HorizontalOffset="0" VerticalOffset="0" PopupAnimation="Fade" Placement="Left"
PlacementTarget="{Binding ElementName=errorBorder}" IsOpen="{Binding ElementName=placeholder, Path=AdornedElement.IsFocused, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<Polygon VerticalAlignment="Center" Points="0,4 4,0 4,8" Fill="#FFCB2E2E" Stretch="Fill" Stroke="#FFCB2E2E"
StrokeThickness="2" />
<Border Background="#FFCB2E2E" CornerRadius="4" Padding="4">
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="2,0,0,0"
Text="{Binding ElementName=placeholder, Path=AdornedElement.ToolTip, Mode=OneWay}" />
</Border>
</StackPanel>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
</Application>
Now in My Main Window I have following code:
<Window x:Class="MY.UI.View.MainWindow"
xmlns:local="clr-namespace:MY.UI.View"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
xmlns:vm="clr-namespace:MY.UI.ViewModel"
xmlns:rules="clr-namespace:MY.UI.Validations"
>
<Grid x:Name="MainGrid">
<TextBox Grid.Row="1"
x:Name="CellphoneNumberTextBox"
Grid.Column="1"
VerticalAlignment="Stretch"
Margin="10,0,0,10"
IsEnabled="{Binding ElementName=PereferenceRadio,Path=IsChecked}"
Text="{Binding CurrentEnrolmentDetail.CellNumber,NotifyOnValidationError=True,ValidatesOnNotifyDataErrors=True,UpdateSourceTrigger=PropertyChanged}">
</TextBox>
</Grid>
</Window>
If I move style to Window.Resources, it just works fine ,but when I have this in App.XAML , does not work. Is this due to difference in namespace?

Set a style key in App.Xaml and use the key in your Textbox.
Example:
App.Xaml
<Style x:Key="HeaderStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="24" />
</Style>
Window:
<Window x:Class="WpfTutorialSamples.Styles.ExplicitStyleSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ExplicitStyleSample" Height="150" Width="300">
<StackPanel Margin="10">
<TextBlock>Header 1</TextBlock>
<TextBlock Style="{StaticResource HeaderStyle}">Header 2</TextBlock>
<TextBlock>Header 3</TextBlock>
</StackPanel>
</Window>
Or Override using BasedOn functionality
Try this if you don't have interest to create style key
App.Xaml
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<!-- ... -->
</Style>
I have declared my base styles in a ResourceDictionary in App.xaml, if i override them in a specific window like this, it usually works.

If all TextBox will remain similar thought application than use following in resource file.
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Background" Value="Blue"/>
</Style>
Else create key in App.xaml and use in the TextBox's where required as shown below:
<Style x:Key="TextboxBackgroundColor" TargetType="TextBox">
<Setter Property="Background" Value="Cyan"/>
</Style>
<TextBox x:Name="txtText" Style="{StaticResource TextboxBackgroundColor}" />

Hovering custom control in WPF MaterialDesign

I want to add hover effect to a control (changing border or background color will do). I have found many answers about it such as this one:
WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls
The problem is I am using custom control (I am using materialdesign for wpf specifically). I don't even know what to put on the TargetType.
UPDATE: Here is what I have done so far. I have removed irrelevant code.
As I have said, I don't know what to put on the TargetType, so I tried to put Control but it is not working.
<md:Card
Margin="4 4 4 4"
Width="100"
Height="220"
>
<md:Card.Style>
<Style TargetType="{x:Type Control}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</md:Card.Style>
<Grid>
</Grid>
</md:Card>

Try this:
<Window
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:conv="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
xmlns:local="clr-namespace:WpfApplication1"
x:Class="WpfApplication1.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style x:Key="CardStyle1" TargetType="{x:Type materialDesign:Card}">
<Setter Property="Background" Value="#2fff0000"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type materialDesign:Card}">
<Grid Margin="{TemplateBinding Margin}" Background="Transparent">
<AdornerDecorator>
<AdornerDecorator.CacheMode>
<BitmapCache EnableClearType="True" SnapsToDevicePixels="True"/>
</AdornerDecorator.CacheMode>
<Border Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ShadowAssist.ShadowDepth), Converter={x:Static conv:ShadowConverter.Instance}}"
CornerRadius="{TemplateBinding UniformCornerRadius}">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
x:Name="PART_ClipBorder"
Clip="{TemplateBinding ContentClip}" />
</Border>
</AdornerDecorator>
<ContentPresenter
x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Clip="{TemplateBinding ContentClip}"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentControl.ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_ClipBorder" Property="Background" Value="#4fff0000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<materialDesign:Card Style="{DynamicResource CardStyle1}"
Content="My Sample Card"
HorizontalAlignment="Center"
Margin="0"
VerticalAlignment="Center"
Width="100"
Height="100" />
</Grid>

Show/Hide Left and Right Border in WPF RichTextBox codebehind?

I want to hide/show WPF RichTextBox left border sometimes in code behind and also for right border sometimes.
Can this be achieved?
I've already tried in XAML like this borderthickness ="3,3,0,3". It hides my right side, now I need to show that right side border and also hide my right side border.
How do I do that?
Updated:
<Window x:Class="View.SingleLineTextMode"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SingleLineTextMode" Height="300" Width="300" WindowState="Maximized" WindowStyle="None" WindowStartupLocation="CenterScreen" Background="Black">
<Window.Resources>
<Style x:Key="MyStyle" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="Padding" Value="0,5,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="3,3,0,3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="Yellow"/>
<Setter Property="BorderThickness" TargetName="bg" Value="3,3,0,3"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="Yellow"/>
<Setter Property="BorderThickness" TargetName="bg" Value="3,3,0,3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<!--<RichTextBox Name="txtAppendValue" Height="60" Width="1920" Style="{StaticResource MyStyle}" Margin="0,0,-10,0" FontSize="60" FontFamily="Arial" IsReadOnly="True" Focusable="False" Cursor="Arrow" BorderThickness="3,3,3,3" IsUndoEnabled="False" UndoLimit="0" TextOptions.TextFormattingMode="Display" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.CacheLength="2,3" VirtualizingPanel.CacheLengthUnit="Page" TextBlock.LineHeight="100" Padding="0">
</RichTextBox>-->
<RichTextBox Name="txtAppendValue" HorizontalAlignment="Center" VerticalAlignment="Center" Height="60" Width="1920" Style="{StaticResource MyStyle}" Margin="0,0,0,0" FontSize="40" FontFamily="Arial" IsReadOnly="True" Focusable="False" Cursor="Arrow" IsUndoEnabled="False" UndoLimit="0" TextOptions.TextFormattingMode="Display" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.CacheLength="2,3" VirtualizingPanel.CacheLengthUnit="Page" TextBlock.LineHeight="100" >
</RichTextBox>
<Label Name="lblStatusUpdate" ></Label>
</Grid>
</Window>
The above one is my XAML.
txtAppendValue.BorderThickness=new Thickness("0,3,0,3");
But its not working.
Regards
Arjun

You can do the same thing from code like this:
myRichTextBox.BorderThickness = new Thickness(3,3,0,3);
Then if all borders need to have same thickness, you can use only one number:
myRichTextBox.BorderThickness = new Thickness(3);
Edit:
Since you are using style, you can define multiple styles and then switch between them:
<Style x:Key="MyStyleNoBorders" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="0,3,0,3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyStyleBothBorders" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Make sure your RichTextBox is not too wide to fit the screen, or you will not be able to see the borders. Then in code just use a call to change styles:
txtAppendValue.Style = FindResource("MyStyleNoBorders") as Style;
and
txtAppendValue.Style = FindResource("MyStyleBothBorders") as Style;

changing background color of togglebutton when checked

I am trying the distinguish the state of the toggle button when clicked. I have the snippet below
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="DimGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Height="60" Content="Text" Style="{StaticResource OnOffToggleImageStyle}">
</ToggleButton>
</Grid>
</Window>
However this does not work when IsChecked value is set to "True" in the style. When set to false it works.
I wonder why. Any answers!

When running your code sample, it appears the style is conflicting with the 'chrome' of the ToggleButton (i.e. the original style of the button).
It would probably be better in this situation to override the template of the ToggleButton to behave in the manner you desire. An ugly example can be found below:
<Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="outer"
BorderBrush="White"
BorderThickness="2"
Opacity=".9"
Background="Transparent">
<Border x:Name="inner"
Margin="8"
BorderThickness="0"
Background="{
Binding Background,
RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="container">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="display"
Grid.Row="1"
Text="{Binding Content, RelativeSource={
RelativeSource TemplatedParent}}"
Foreground="White"
FontSize="11"
FontFamily="Segoe UI"
FontStyle="Normal"
FontWeight="Normal"
Margin="8,0,0,4"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="outer" Property="Background" Value="LightBlue"/>
<Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>