Style a window in visual studio - c#

My issue it that I have created a text box that bolds when someone clicks into it. I want it to unbold when I click somewhere else on the screen. Now heres that hard part I need to do that in my style sheets and the .cs sheet hooked up to style sheet. The contents of my .cs sheet is
using System.Windows;
using System.Windows.Input;
namespace SimTechGUI
{
public partial class MyResourceDictionary : ResourceDictionary
{
public MyResourceDictionary()
{
InitializeComponent();
}
private void Window_Focus(object sender, MouseButtonEventArgs e)
{
Keyboard.ClearFocus();
}
}
}
My xaml style sheet looks like
<ResourceDictionary xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SimTechGUI.MyResourceDictionary"
x:ClassModifier="public">
<Style TargetType="{x:Type Window}">
<EventSetter Event="MouseDown" Handler="Window_Focus" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="6" Padding="2" BorderBrush="Black" BorderThickness="2,1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderThickness" TargetName="Border" Value="3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
What I have does not currently work. Does anyone know what I have to do to make this work.

Your code works fine if you set MouseDown Event Handler directly on Window
MouseDown="Window_Focus"
The way you have the style applied, the Window_Focus Handler never hits. Put a breakpoint on Keyboard.ClearFocus(); and see if it hits?

You can Apply the Style by Name Explicitly
Define a style like this:
<Style x:Key="windowStyle" TargetType="Window">
<EventSetter Event="MouseDown" Handler="Window_Focus" />
</Style>
and Apply like this to all the Windows:
Style="{StaticResource windowStyle}"
The reason I think it's not letting you specify Style Implicitly is probably there is an Style already being applied to all the Windows:
Look at these posts:
What reasons could prevent explicit and implicit styles from applying?
or
Global Style not working in WPF

Related

WPF Styling : Resource not found; ResourceKey

I have some styles and templates in App.Xaml so I can acces them thru multiple UserControls.
EDIT : This is within the app.Xaml:
One of the Styles are :
<Application x:Class="BaseRefence.generatingAnnotation.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BaseRefence.generatingAnnotation"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="ComboBoxStyleRounded" TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="25"
BorderThickness="1,1,2,2">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ComboBox.Static.Background}"/>
<Setter Property="BorderBrush" Value="#42536b"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1,1,2,2"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="6,3,5,3"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
</Application>
And in de UserControl.Xaml I have:
<ComboBox ItemsSource="{Binding ViewFamilyTypesInProject}"
SelectedItem="{Binding SelectedViewFamilyType, Mode=TwoWay}"
Grid.Row="1"
Grid.Column="1"
Margin="10 5"
MaxHeight="40"
Style="{DynamicResource ComboBoxStyleRounded}">
Within the designer everything works great, it shows correctly and all.
However, whenever I build and run my code, it gives the message and it does not override the style but keeps the default style.
System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='ComboBoxStyleRounded'
My experience: I frequently have same issues (using VS 16.6.2, .NET Core 3.1 and WPF).
Simply close Visual Studio and restart it: 98% of the times error disappears (will reappear sometime in the future).
You have an invalid Style. It may compile, as the XAML is syntactically correct, but the semantics of the markup are wrong. Since you are referencing the Style using DynamicResource the error occurs at runtime. But I wonder why don't get a XAML Designer error.
You are setting the ComboBox.Template property twice. Moreover and most important, the first ControlTemplate at the top of the Style is targeting the wrong type TextBox:
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="25"
BorderThickness="1,1,2,2">
</Border>
</Grid>
</ControlTemplate>
The type must be of course <ControlTemplate TargetType="ComboBox">.
Since you are referencing a ControlTemplate resource later
<Setter Property="Template" Value="{StaticResource ComboBoxTemplate}" />
I think you want to remove the first ControlTemplate. If you want to change the appearance of the TextBox, you would need to override the complete ControlTemplate of the ComboBox.
You may should run Clean Solution and Rebuild Solution.

How to repeat programming lines in XAML?

... by the term "programming lines" I mean parts of code .
I am currently creating an UI using c# and XAML. But the XAML code is getting longer and longer, so I realised that if I could somehow set inside the code or store separately, repeatable parts of code and use them every time I needed, the whole XAML code would be shorter and clearer.
For example, let's say that I have a specific label which I want to repeat in several points of the code:
<Label Name="myLabel" Content="something">
</Label>
How could I possibly apply and repeat that label inside my XAML code?
There is a quick example of how the XAML code can be shared between different views/windows. Create a ResourceDictionary, define the shared properties/styles/control templates, like this
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="Label" x:Key="TitleStyle" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="FontSize" Value="16" />
</Style>
</ResourceDictionary>
Than you can add this dictionary to App/Window MergedDictionaries to use them, like
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Please, note that this is just a quick example to briefly explain the idea. You can also have look at Style.TargetType docs to see explanation between TargetType and x:Key in styles

Changing Windows.Ribbon background color

I am working with the System.Windows.Ribbon in my project. I am also using some other libraries like AvalonDocking,... What I want to do is create my own themes inside the application so that the user can select the prefered theme.
The problem is that I don't get the RibbonTab to change to the correct colors. When I change the ribbon background color the RibbonTab color changes also. But I want to change it seperatly
Does anybody have any experience with changing the layout of the System.Windows.Ribbon?
This is what I tried before:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock">
<SolidColorBrush x:Key="WindowBrush" Color="Black"/>
<Style TargetType="{x:Type Ribbon}">
<Setter Property="Background" Value="#444444" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style TargetType="{x:Type RibbonTab}">
<Setter Property="Height" Value="88" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Black" />
</Style>
<Style TargetType="{x:Type xcad:DockingManager}">
<Setter Property="Background" Value="#444444" />
<Setter Property="Foreground" Value="White" />
</Style>
</ResourceDictionary>
As you can see, the RibbonTab is not black like specified inside the ResourceDictionary

WPF :Material Design + dragablz tabItem header style

I am working in WPF with the MaterialDesign Toolkit and Dragablz.
I encountered a problem while trying to style a TabablzControl.
I already have style for the windows default TabControl and TabItem header, as shown in the picture:
http://i.imgur.com/2anl5rl.png
But when I change the default tabControl to TabablzControl, it turns into this:
http://i.imgur.com/bhaaMVy.png
Here are the window.resources:
<Style x:Key="mdTabControl" TargetType="TabControl">
<Setter Property="TextElement.Foreground" Value="{DynamicResource MaterialDesignBody}"/>
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
</Style>
<Style x:Key="mdTabHeader" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="1,0,1,0" CornerRadius="3 3 0 0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" Margin="10,2,10,2"
RecognizesAccessKey="True">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource SecondaryAccentBrush}" />
<Setter Property="Foreground" Value="{StaticResource SecondaryAccentForegroundBrush}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource PrimaryHueMidBrush}" />
<Setter Property="Foreground" Value="{StaticResource PrimaryHueMidForegroundBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource PrimaryHueDarkBrush}" />
<Setter Property="Foreground" Value="{StaticResource PrimaryHueDarkForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The error appears when I change the mdTabControl style targetType to:
TargetType="dbz:TabablzControl"
I want to keep the style I set to the TabControl, but with the added functionality of the TabablzControl
Any help will be appreciated
First thing to note, which is a general WPF characteristic, you are not using style inheritance correctly.
As you are using Material Design with Dragablz, if you are restyling the tab control itself, you must inherit from the Material Design style in the Dragablz assembly using BasedOn:
<Style x:Key="mdTabControl" TargetType="TabControl" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}">
<Setter Property="TextElement.Foreground" Value="{DynamicResource MaterialDesignBody}"/>
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
</Style>
Again, with the tab header itself, you need to inherit from the relevant style:
<Style x:Key="mdTabHeader" TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemStyle}">
. . .
</Style>
Note, that (depending you your App.xaml setup) you probably need to make sure the correct resource dictionary is included in the same XAML file. For example a more complete XAML might be:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="NormalTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemStyle}">
<Setter Property="Width" Value="280" />
<Setter Property="Padding" Value="1" />
</Style>
. . .
</ResourceDictionary>
</Window.Resources>
Finally, as you are changing the TabItem style, you either need to the TabablzCOntrol style the correct style, or you could use it where you actually declare the TabablzControl itself:
<dragablz:TabablzControl ItemContainerStyle="{StaticResource mdTabHeader}" />
A good example of all this in action is in the SidePanels project in the demo solution at: https://github.com/ButchersBoy/DragablzSamplez
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>

while Inherit style in WPF it affect parent style

In WPF i have a style for the control like below,
<Style TargetType="local:CustomControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Padding" Value="3,0,3,0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
Now i need to override customcontrol border for some other place like below,
<Style TargetType="local:CustomControl" BasedOn="{StaticResource {x:Type local:CustomControl}}">
<Setter Property="BorderThickness" Value="1" />
</Style>
My problem is when i am using above code it override the 1st written code. is my code is correct.
Note: the base style is only written with target type. i need to override that control border in some other place without affect base code.
is it possible ? please help me to resolve this problem.
thanks in advance.
If you declare a Style without an x:Key, it will override the default style for that control.
<Style TargetType="local:CustomControl">
So the code above will effect all CustomControl elements throughout the entire application (or within the scope).
If you do not want to override the base style, you can give your Style an x:Key, like so:
<Style TargetType="local:CustomControl" x:Key="MyAwesomeStyle">
When you create your control, you will then have to reference the Style. Here's an example:
<local:CustomControl Style="{DynamicResource MyAwesomeStyle}" ... />
Accidentally I saw some example which can be useful in solving the mentioned problem. In your example own custom control has been used, in my example - a button.
<Grid>
<Button Style="{StaticResource AddButtonStyle}" Tag="Add" Click="addClick" />
</Grid>
Code for AddButtonStyle:
<Style x:Key="AddButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="Content" Value="✅"/>
</Style>
AddButtonStyle based on AppBarButtonStyle. Below code for it.
<Style x:Key="AppBarButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="40" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="88" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontFamily" Value="Segoe UI Symbol" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">. . .
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On this example base, you must declare a Style with an x:Key, and should not set any value to Content (in you example BorderThickness) property in the inherited style.

Categories

Resources