We Keep Coding

Modify a custom styled button's border in WPF XAML - c#

I'm trying to achieve this through XAML code but to no avail.
I have the following XAML code:
App.xaml
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Fill="{TemplateBinding Background}"
Data="M 0,22.5 22.5,0 27.5,5 10,22.5 27.5,40 22.5,45"/>
<Border x:Name="border"
BorderThickness="2"
BorderBrush="Red"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And use it like so:
<Button Style="{StaticResource ButtonStyle}" Height="100" Width="100"/>
It gives me this but I want the red border to be inside the button.
I tried adding this
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="2"/>
instead of creating a grid but now the border doesn't show.
I guess I could create another path that would act as a border but is there a simpler way?

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Fill="{TemplateBinding Background}" Stroke="Red" StrokeThickness="3"
Data="M 0,22.5 22.5,0 27.5,5 10,22.5 27.5,40 22.5,45"/>
<Border x:Name="border"
BorderThickness="2"
BorderBrush="Red"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
trying to use Stroke and StrokeThickness properties.

Related

This is my first application with a GUI that I'm building so I might be doing things wrong.
I want to implement some navigation into my app but I don't seem to understand how to do it properly.
Here's the code:
.xaml
<Window x:Class="introducereDAC.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"
mc:Ignorable="d"
Title="Divide et Impera" Height="450" Width="800" Background="#FF00000F">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="NoWrap" Text="
←Introducere DEI (curent)" FontFamily="./#Roboto Condensed" Foreground="#505054" Margin="45,0,0,0"/>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="0" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="Introducere DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="DEI Iterativ" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="4" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="Probleme DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0" Click="NavigareProbleme">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="0" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Teorie" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Avantaje + Dezavantaje" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Comparatii cu alte metode" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="3" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Cod" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="4" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Complexitate" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="5" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Executie" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<DockPanel Grid.Row="3" Grid.ColumnSpan="6">
<Frame x:Name="_mainFrame" />
</DockPanel>
</Grid>
</Window>
.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace introducereDAC
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void NavigareProbleme(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new Page1());
}
}
}
As an experiment, I've been trying to do it on the button "Probleme DEI", using Click="NavigareProbleme".
After I double click on the button, my app looks like this:
My goal is to edit that white bar and its buttons however I want, but I don't know how to do it (and I didn't find anything useful on Google), and move it at the top, above the other buttons.
Also, is there any way to make it always be there? (not only after I double click on "Probleme DEI")
Thanks.

I don't recommend to use a Frame. Instead implement a simple custom page/view navigation using data templates. You can follow this examples, if you are interested: C# WPF Page Navigation Class, How do I toggle between pages in a WPF application?.
Do not wrap each control you want to display.
Using a Viewbox to wrap a Button does not make sense. A Button inside a Grid will always stretch to occupy all available space by default. Use a Viewbox to stretch and scale elements that don't have their own resize behavior implemented and require on absolute layout properties, like Path. I doubt that you really want you buttons to stretch freely as this would look very odd.
Wrapping the lonely Frame into a DockPanel also does not make any sense. A DockPanel is a container, that arranges it's child elements relative to each other. It only makes sense to use it with more than a single child. Just add the Frame directly to the Grid. Every redundant Panel and UIElement will cost a unnecessary performance penalty as they have to be measured, arranged and maybe rendered individually (recursively).
Create a style for a control (WPF .NET) - Do not copy and paste styles to reuse them. Define a single Style, assign it a x:Key and add it to a ResourceDictionary e.g, App.xaml. Then reference it using the StaticResource markup (or define the Style as implicit to make it apply to all buttons implicitly):
App.xaml
<ResourceDictionary>
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
...
</Style>
</ResourceDictionary>
Then reference it using StaticResource and the defined key:
<Button Style="{StaticResource ButtonStyle}" />
To customize the navigation bar of the Frame you would have to override the default template. You can visit Frame Styles and Templates to find an example of the original Frame style.
Alternatively hide the original navigation bar (by setting Frame.NavigationUIVisibility) and implement a custom one and use the frame's NavigationService to navigate between its content.
Moving the navigation bar without moving the Frame is not possible. Taking a look at the default template will show you that it is part of the Frame control. You can only move the buttons into a the Page, to make them part of the frame's content.
At this point I have to recommend to implement a custom navigation logic again. It will give you all the flexibility to layout your view you want, as navigation buttons and the actual content host are not part of the same template.
Or hide the original navigation UI and implement your own and locate it where ever you want.

I have created custom control and a default style for it.
My XAML is simple:
<Style TargetType="{x:Type local:MyControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="10" BorderThickness="1" Background="Transparent" BorderBrush="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I connect to this style using DefaultStyleKey:
DefaultStyleKey = typeof(MyControl);
And it works. But now I want to create other style for my control. It's because my control can have some modes defined as enums, like:
public enum ControlMode
{
Mode1,
Mode2
}
Now, when my control is in Mode1 I want it to have its default style. But when it's in Mode2 I want it to have another style, like:
<Style TargetType="{x:Type local:MyControl}" x:Key"styleForMode2>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" Background="White" BorderBrush="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I achieve that? DefaultStyleKey works only for type name, so the only thing I came up with is to create another class for my control: MyControlWithMode2. But I'm sure there is more proper way. Right?
(this is library not an application, so I cannot use application's resources)

Assuming your control has a Mode property, the default Style could declare Triggers to set different ControlTemplates for different modes:
<Style TargetType="local:MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="10" BorderThickness="1"
Background="Transparent" BorderBrush="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Mode" Value="Mode2">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" Background="White"
BorderBrush="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

I have the following style
<Style x:Key="RoundedBtn" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Image x:Name="image" Source="{Binding ButtonImage, RelativeSource={RelativeSource AncestorType=Button}}" Margin="0,2,0,3" HorizontalAlignment="Left" Width="40" />
<Border BorderBrush="{x:Null}" Height="16" Margin="45,15,0,14" Width="123" HorizontalAlignment="Left">
<TextBlock x:Name="textBlock" Margin="-1" TextWrapping="Wrap" Text="{Binding ButtonText, RelativeSource={RelativeSource AncestorType=Button} }"
FontSize="13"
FontFamily="{DynamicResource Helvetica}" VerticalAlignment="Center" TextDecorations="{x:Null}">
</TextBlock>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#8da0aa"></Setter>
<Setter Property="Foreground" Value="#318EE4"></Setter>
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline">
<!--That Text decoration part doesnt work--></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I apply this style to my "usercontrol" (which is actually a button):
<Button x:Name="btn" x:Class="MyStock.MyButton"
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"
mc:Ignorable="d" Height="45" Width="183" Style="{DynamicResource RoundedBtn}" />
When I generate the project, the "MyButton" appears in my custom controls. But if I drag it on my form and test it, the Text Underline doesnt work.
But If i put a normal button on my form and then apply the RoundedBtn style, it works, why ?
By the way, what I am trying to achieve is to have a button that looks like the left menu buttons on this page

Use TargetName in the Setter:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
The whole style looks like this (I remove irrelevant part for readability)
<Style x:Key="RoundedBtn" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button">
<Grid>
<Border>
<TextBlock x:Name="textBlock" Margin="-1" TextWrapping="Wrap" Text="ABC"
FontSize="13" TextDecorations="{x:Null}">
</TextBlock>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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;

I want to change the color of the ResizeGrip's squares, but I can't find the right property.
I tried overriding the default ResizeGrip style as follow:
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="Foreground" Value="{StaticResource WindowBackground}" />
</Style>
I suppose the ControlTemplate is too complex to be able to reach that property from the TemplatedParent.
So, am I supposed to override the ControlTemplate ? Get the grip by code ? Or is there something easier that I missed ?

If we go check out the default template we see not only are those properties not template bound, they have a hard set "Transparent" in there. So we can just take up the slack;
EDIT
<Style x:Key="blah" TargetType="{x:Type ResizeGrip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ResizeGrip}">
<Border Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
Width="10"
Height="10">
<Path Data="M7.677,7.5300003 L9.677,7.5300003 9.677,9.5300002 7.677,9.5300002 z M3.786,7.5300003 L5.7859998,7.5300003 5.7859998,9.5300002 3.786,9.5300002 z M0,7.5300003 L2,7.5300003 2,9.5300002 0,9.5300002 z M3.786,3.8280003 L5.7859998,3.8280003 5.7859998,5.8280003 3.786,5.8280003 z M7.677,3.7660003 L9.677,3.7660003 9.677,5.7659999 7.677,5.7659999 z M7.677,0 L9.677,0 9.677,2 7.677,2 z" Fill="{TemplateBinding Foreground}" Height="9.53" Stretch="Fill" VerticalAlignment="Top" Width="9.677"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can go make it whatever you want;
<ResizeGrip Foreground="Red" Style="{StaticResource blah}"/>
Hope this helps, cheers.