We Keep Coding

Reste telerik Theme after add <Style>

I want to change my WPF & C# code to telerik. Before change i have HeaderContentControl with some Workspaces
My XAML code
<HeaderedContentControl
Content="{Binding Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"
Style="{StaticResource MainHCCStyle}"
/>
My Resources
<Style x:Key="MainHCCStyle" TargetType="{x:Type HeaderedContentControl}>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}>
<DockPanel>
<ContentPresenter
ContentSource="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
/>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="4"
/>
</DataTemplate>
After modify code to Telerik my code looks like
My XAML code
<telerik:RadTabbedWindow
Content="{Binding Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"
telerik:StyleManager.Theme="Office2016"
Style="{StaticResource MainHCCStyle}"
/>
My Resources
<Style x:Key="MainHCCStyle" TargetType="{x:Type telerik:RadTabbedWindow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadTabbedWindow}">
<DockPanel>
<ContentPresenter
ContentSource="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
/>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="4"
/>
</DataTemplate>
Workspaces wors ok, but Telerik theme doesn't work ( telerik:StyleManager.Theme="Office2016"). Styles only activate if I delete them Style="{StaticResource MainHCCStyle}", however then workspaces doesn't work

The custom Style that targets RadTabbedWindow is overriding its ControlTemplate (via the Template property). This means that the default look and feel of the control is replaced with the Dock panel defined in the Style.
To make this work, set the ContentTemplate of RadTabbedWindow, instead of its Template property.

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}" />

Content of a Button Style appears only in one Button instance

I have a Viewbox:
<Viewbox x:Key="SampleViewbox" >
<Grid>
<Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
</Grid>
</Viewbox>
I then include this in a Style like:
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent" >
<ContentPresenter Content="{StaticResource SampleViewbox}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I created many buttons with SampleStyle
<Grid>
<StackPanel>
<Button Style="{StaticResource SampleStyle}" Height="50" Width="50"></Button>
<Button Style="{StaticResource SampleStyle}" Height="80" Width="80"></Button>
<Button Style="{StaticResource SampleStyle}" Height="20" Width="20"></Button>
</StackPanel>
</Grid>
However, Only one button has the Ellipse (viewbox)
How can I make all the buttons have/show the ellipse??

Viewbox is FrameworkElement which cannot belong to multiple parents. Every time buttons request a resource {StaticResource SampleViewbox} they get the same instance.
to change that behavior add x:Shared="False" attribute
<Viewbox x:Key="SampleViewbox" x:Shared="False">

I think a good approach is to use DataTemplate.
So you will have
<DataTemplate x:Key="SampleViewbox">
<Viewbox>
<Grid>
<Ellipse
Width="128"
Height="128"
Fill="#d5273e"
Stroke="#e2e2e0"
StrokeThickness="6" />
</Grid>
</Viewbox>
</DataTemplate>
And for style
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent">
<ContentPresenter ContentTemplate="{StaticResource SampleViewbox}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Setting the x:Shared attribute of the ViewBox to false as suggested by #ASh will indeed work but why don't you just include the ViewBox in the ControlTemplate like this?
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent" >
<Viewbox>
<Grid>
<Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
</Grid>
</Viewbox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
A template is a template and a control instance is an instance.

XAML WPF: Tab Control

I am currently prototyping a simple GUI program where I ran into what I hope is a quick fix with Tab Control customization. My tabs are currently set to "Light Sky Blue" when they are active. I have two tab boxes, and one of them I would like to change to Blue Violet. When I enter the code for the color in the area for the tabs that I would like to change, nothing happens.
Note for Code: I am trying to change the File, Options and Help tabs. You will be able to see in my code that I tried to set the background to "BlueViolet".
Let me know if you need a picture.
Here is my code:
<!---Main Class-->
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CartTools" Height="700" Width="1135" Name="Practice" FontSize="14" Opacity="1">
<Window.Resources>
<!---Tab items for Cart customization-->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="1,1,1,1"
CornerRadius="30,6,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="AliceBlue">
<!---File, Options, Help tabs-->
<TabControl HorizontalAlignment="Left" Name="TabControl1" Width="215" Margin="0,0,0,286">
<TabItem Header="File" Name="TabItem1" Background="BlueViolet">
<Grid>
<Label Height="28" Margin="6,6,79,0" Name="Label1" VerticalAlignment="Top">New</Label>
<Button Height="23" HorizontalAlignment="Left" Margin="6,40,0,0" Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>
</Grid>
</TabItem>
<TabItem Header="Options" Name="TabItem2" Background="BlueViolet">
<Grid />
</TabItem>
<TabItem Header="Help" Name="TabItem3" Background="BlueViolet">
<Grid />
</TabItem>
</TabControl>
<!---Cart Management Tabs-->
<TabControl Margin="251,0,12,12" Name="TabControl2">
<TabItem Header="CartFunctions" Name="TabItem4">
<Grid>
<RadioButton Height="16" Margin="6,6,0,0" Name="RadioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">RadioButton</RadioButton>
<RadioButton Height="16" HorizontalAlignment="Left" Margin="6,28,0,0" Name="RadioButton2" VerticalAlignment="Top" Width="120">RadioButton</RadioButton>
<CheckBox Height="16" HorizontalAlignment="Left" Margin="6,50,0,0" Name="CheckBox1" VerticalAlignment="Top" Width="120">CheckBox</CheckBox>
</Grid>
</TabItem>
<TabItem Header="Cart Configuration" Name="TabItem5">
<Grid />
</TabItem>
<TabItem Header="Cart I/O" Name="TabItem6">
<Grid />
</TabItem>
<TabItem Header="CMS" Name="TabItem7">
<Grid />
</TabItem>
<TabItem Header="Blocking Database" Name="TabItem8">
<Grid></Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
Thank you!

Use TemplateBinding to get the local value from the Control in ControlTemplate.
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Background="{TemplateBinding Background}">
...
</Border>
</ControlTemplate>
Then you will see two different backgrounds
<TabControl>
<TabItem Background="LightSkyBlue" />
<TabItem Background="BlueViolet" />
</TabControl>
If you want different colors only for IsSelected is true or false use TemplateBinding in ControlTemplate.Triggers.

TabControl item header text appears blurry after rotating tabs

I have a requirement to create a WPF TabControl control with tabs rotated to the left.
The resources I've found online suggest that this can be done by applying the following two things to the TabControl:
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270"/>
</Setter.Value>
</Setter>
and
<TabControl TabStripPlacement="Left" ...
All this works and the tabs are displayed as required but for some reason the Header text in the tabs appears blurry after the rotation, please suggest why this is happening and if there is anything I can do to fix this issue.
Complete XAML:
<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">
<Grid>
<TabControl BorderBrush="Gray" BorderThickness="1" TabStripPlacement="Left">
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" BorderBrush="Gray" BorderThickness="1" CornerRadius="6,6,0,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center" HorizontalAlignment="Center"
ContentSource="Header" Margin="12,2,12,2"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabItem Header="Item 1" />
<TabItem Header="Item 2" />
<TabItem Header="Item 3" />
</TabControl>
</Grid>
</Window>

Add the following properties to the window declaration XAML
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"
UseLayoutRounding="true"

You could check out the RenderOptions class which controls rendering behavior of Objects. For example see this (Image in WPF getting Blurry) where it was used to reduce blurring of images.

Try to add SnapsToDevicePixels="True" and UseLayoutRounding="True" to your Border or TabControl tag. These have solved my blurriness problems in most cases.
I suggest this code snippet :
<TabControl TabStripPlacement="Left" Margin="5" FontSize="13" FontFamily="Verdana" Grid.ColumnSpan="2" SnapsToDevicePixels="True" UseLayoutRounding="True" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border x:Name="grid" Margin="0" >
<Border.LayoutTransform>
<RotateTransform Angle="270" ></RotateTransform>
</Border.LayoutTransform>
<ContentPresenter>
<ContentPresenter.Content>
<TextBlock FontFamily="Verdana" Margin="4" Text="{TemplateBinding Content}">
</TextBlock>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Name="General" Header="YourHeader" > ..