I have WPF application and I am using materialDesign.
This is my app.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToolTip.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
My style:
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="Silver"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="Placement" Value="Bottom"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="ToolTipService.ShowDuration" Value="10000"/>
<Setter Property="ToolTipService.HorizontalOffset" Value="-20"/>
<Setter Property="ToolTipService.Placement" Value="Left"/>
<Setter Property="ToolTipService.ShowsToolTipOnKeyboardFocus" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Border x:Name="Root" CornerRadius="5" BorderThickness="1" BorderBrush="{DynamicResource SettingsLeftMenueBackgroundColor}" Background="{DynamicResource ToolTipBackgroundColor}">
<ContentPresenter Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsOpen" Value="False">
<Setter TargetName="Root" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Some control:
<Button Name="btnSettings"
Padding="0"
Cursor="Hand"
Command="{Binding OpenSettingsFormCommand}">
<Button.ToolTip>
<ToolTip Content="Settings"
ToolTipService.Placement="Top"/>
</Button.ToolTip>
</Button>
And I cannot see this ToolTip at all.
I try to remove MaterialDesignTheme.ToolTip.xaml from my app.xaml or add key into my ToolTip style and using this style via key but this not helped at all.
My ToolTip missing across all my application.
Related
I would like to style the Tooltip of Textboxes which are used for validation. I'm trying to get a rounded corners Tooltip without sucess. How may I get it from ResourceDictonary?
With the code below, I'm getting the Tooltip text on validation error with a rectangular border. Here is my code:
<ResourceDictionary>
<!-- Textbox with validation capabilities -->
<Style x:Key="ValidableTextBox" TargetType="TextBox">
<Style.Resources>
<Style x:Key="ToolTip" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="Border" CornerRadius="4" BorderThickness="1" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Height" Value="22"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<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>
</ResourceDictionary>
I just realized that BorderBrush property was missing, thanks to Muhammad for he made it working (remove the x:Key="ToolTip"), here is the updated code:
<ResourceDictionary>
<!-- Textbox with validation capabilities -->
<Style x:Key="ValidableTextBox" TargetType="TextBox">
<Style.Resources>
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="Border" CornerRadius="4" BorderThickness="1" BorderBrush="Red" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Height" Value="22"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<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>
</ResourceDictionary>
I've created a WPF Style for a TextBox with an InputBindings (KeyBinding for Enter) inside the ControlTemplate.
Style and InputBindings is working fine for my TextBoxes, but if I use this Style for my TextBoxes the TabOrder/TabStop is not working any more.
This is the style:
<Style x:Key="TextBoxTemplate" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="5,0,5,5"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<TextBox Text="{TemplateBinding Text}">
<TextBox.InputBindings>
<KeyBinding Command="{Binding EnterKeyCommand}" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How I add it to my TextBoxes:
<TextBox Text={Binding FirstName} Style="{StaticResource TextBoxTemplate}">
<TextBox Text={Binding LastName} Style="{StaticResource TextBoxTemplate}">
I think the problem is that I use a TextBox inside of the ControlTemplate.
But I don't know how to get running the InputBindings without the TextBox inside of the Template
Do you have any idea?
Thanks Phil
Modify your template to look like the original one plus your KeyBinding:
<Style x:Key="TextBoxTemplate" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="5,0,5,5"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<ScrollViewer.InputBindings>
<KeyBinding Command="{Binding EnterKeyCommand}" Key="Enter"/>
</ScrollViewer.InputBindings>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This question already has answers here:
WPF C# button style
(5 answers)
Closed 5 years ago.
I have created a custom looking button in XAML, which is defined as below:
<Button Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}">
<Button.Template>
<ControlTemplate>
<Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD">
<TextBlock Foreground="Black"
Text="Help"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="26"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/>
<Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/>
<Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="true">
<Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/>
<Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Overlay" Property="BorderThickness" Value="3"/>
<Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
How I would like to save this template with a name, and every time I need a button like this, just use the Style property like this:
Style="{StaticResource BackButtonStyle}"
How can I do this?
First you would have to declare your style in a dictionary file
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CompIconButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<!--Anything-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Then you need to declare this dictionary in your application's resources
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Generic_UI/Buttons_Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
And you will finally be able to use your button style as expected
<Button Click="Button_Click" Style="{StaticResource CompIconButton}"/>
You have to style it and save it in a separate .xaml file then load it either for complete app or for each control/window that wants to use it.
This is an example I made you can change it and use it.
<Style x:Key="DefBtn" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#EBEBEB"/>
<Setter Property="BorderBrush" Value="#8C8C8C"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="Segoe UI regular"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="3,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can change the name and add it as a resource dictionary to your project.
And when you want to load it you can do like this.
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/SomeName;component/NameOfYourXamlFile.xaml"/>
</Window.Resources>
Assing the ControlTemplate an x:Key and move it to your App.xaml file:
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="MyButtonTemplate">
<Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD">
<TextBlock Foreground="Black"
Text="Help"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="26"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/>
<Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/>
<Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="true">
<Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/>
<Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Overlay" Property="BorderThickness" Value="3"/>
<Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
You can then reference it throughout your whole application using the x:Key:
<Button Template="{StaticResource MyButtonTemplate}" Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}">
You can do the same thing for a Style (instead of a ControlTemplate).
My ListView should have following style:
no border around the whole ListView (achieved)
no highlighting when interacting with ListViewItem (achieved)
border around selected ListViewItem (missing)
My ListView:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- style selected item -->
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I tried this and this, both doesn't work for me. I guess my problem is the template but I have no idea how to put a border around the selected ListViewItem.
Update
Working solution:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
<Setter TargetName="Border" Property="BorderThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Maybe this works. Add a Border around ContentPresenter an use controlTemplate Triggers
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am struggling to find a solution to this. Every other one i;ve tried is not working. Maybe I am missing something.
I want to change the background color of a Button when I hover over it with the mouse.
This is my XAML:
<Window x:Class="Recruitment_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="374" Width="940">
<Window.Resources>
<Style TargetType="Button" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="StackPanel" x:Key="NavigationButtonContentStyle">
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
<Style TargetType="Image" x:Key="NavigationButtonImageStyle">
<Setter Property="Width" Value="35"/>
</Style>
<Style TargetType="Label" x:Key="NavigationButtonLabelStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="15"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel HorizontalAlignment="Left" Width="200">
<StackPanel.Background>
<SolidColorBrush Color="#404040"/>
</StackPanel.Background>
<Button Style="{StaticResource ResourceKey=NavigationButtonStyle}">
<StackPanel Style="{StaticResource ResourceKey=NavigationButtonContentStyle}">
<Image Style="{StaticResource ResourceKey=NavigationButtonImageStyle}">
</Image>
<Label Style="{StaticResource ResourceKey=NavigationButtonLabelStyle}">
Settings
</Label>
</StackPanel>
</Button>
</StackPanel>
</Grid>
But it looks like the trigger never executes?
What am I missing or how can I get what I want?
Thank you in advance.
To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:
<Style TargetType="{x:Type Button}" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
Try following code
<Style TargetType="Button" x:Key="NavigationButtonStyle">
...
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style>