I'm trying to make a button, which would be blured when disabled.
So far, here's what I have:
<Style x:Key="BluredButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="10" BorderThickness="1">
<Border.Effect>
<BlurEffect Radius="0"/>
</Border.Effect>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF7D8F93" Offset="0"/>
<GradientStop Color="#FF5797A7" Offset="0.997"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
<!--How do I set BlurEffect.Radius here?-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After the button gets disabled, I want to set the blur radius to 3.
How do I do that?
You can set the Effect in the Trigger
<Setter TargetName="Chrome" Property="Effect">
<Setter.Value>
<BlurEffect Radius="3"/>
</Setter.Value>
</Setter>
So it would look like this
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="10" BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF7D8F93" Offset="0"/>
<GradientStop Color="#FF5797A7" Offset="0.997"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
<Setter TargetName="Chrome" Property="Effect">
<Setter.Value>
<BlurEffect Radius="3"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You can do this with the WPF Transitionz animation library (Github, NuGet)
The following code:
<Window x:Class="WpfApplication15.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"
xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
xmlns:wpfApplication15="clr-namespace:WpfApplication15"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
<wpfApplication15:BluParamsWhenTrueConverter x:Key="bpc" From="0" To="10" Duration="200"></wpfApplication15:BluParamsWhenTrueConverter>
</Window.Resources>
<Grid>
<CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
<TextBlock Foreground="#AAA" Margin="10" TextWrapping="Wrap" Text="Lorem ipsum .. TODO insert a lot of text here "
tz:Transitionz.Blur="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource bpc}}"/>
<TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
Visibility="Collapsed"
tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
</Grid>
</Window>
using System;
using System.Globalization;
using System.Windows.Data;
using SciChart.Wpf.UI.Transitionz;
namespace WpfApplication15
{
public class BluParamsWhenTrueConverter : IValueConverter
{
public double Duration { get; set; }
public double From { get; set; }
public double To { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((bool)value) ?
new BlurParams() { Duration = Duration, From = From, To = To, TransitionOn = TransitionOn.Once} :
new BlurParams() { Duration = 200, From = To, To = From, TransitionOn = TransitionOn.Once};
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Results in this output, which allows blurring of background and opacity animation of foreground on property change:
Related
I wanted a control that looks like an LED and I found this code here
WPF Custom LED Checkbox
The problem is I can't get it to change colors. When I start typing the trigger OnColor or OffColor it says the member is not recognized. Here's the Code
<UserControl x:Class="WpfLed.LedControl"
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:WpfLed"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Style TargetType="local:LedControl">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:LedControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Background="Transparent" Name="grd"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}">
<Ellipse x:Name="LedBorder"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="2"
Stretch="Uniform"/>
<Ellipse x:Name="CenterGlow" Stretch="Uniform">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="-0.25"/>
<GradientStop Color="Transparent" Offset="0.91"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="CornerLight" Stretch="Uniform" Margin="2">
<Ellipse.Fill>
<RadialGradientBrush Center="0.15 0.15" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<ContentPresenter x:Name="content" Grid.Column="1" Margin="4,0,0,0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="LedBorder" Property="Fill" Value="{Binding Path=OnColor, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="content" Property="TextElement.Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="LedBorder" Property="Fill" Value="{Binding Path=OffColor, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="content" Property="TextElement.Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="CenterGlow" Property="Fill">
<Setter.Value>
<RadialGradientBrush Opacity="1">
<GradientStop Color="Transparent" Offset="-0.5" />
<GradientStop Color="#888" Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="content" Property="TextElement.Foreground" Value="#888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's how I'm trying to use it
<local:LedControl IsChecked="true" IsEnabled="true" OnColor="Green" x:Name="Led1" Content="Led1" HorizontalAlignment="Left" Margin="10,33,0,0" VerticalAlignment="Top"/>
Here's the C# code in the User Control
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WpfLed
{
public partial class LedControl : UserControl
{
static LedControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(LedControl), new FrameworkPropertyMetadata(typeof(LedControl)));
}
public static readonly DependencyProperty OnColorProperty =
DependencyProperty.Register("OnColor", typeof(Brush), typeof(LedControl), new PropertyMetadata(Brushes.Green));
public Brush OnColor
{
get { return (Brush)GetValue(OnColorProperty); }
set { SetValue(OnColorProperty, value); }
}
public static readonly DependencyProperty OffColorProperty =
DependencyProperty.Register("OffColor", typeof(Brush), typeof(LedControl), new PropertyMetadata(Brushes.Red));
public Brush OffColor
{
get { return (Brush)GetValue(OffColorProperty); }
set { SetValue(OffColorProperty, value); }
}
}
}
I've even tried rebuilding the solution, I'm sure its something simple that I'm overlooking.
EDIT:
I put the template under User control I forgot to post the C# code to add the dependencies but it still doesn't recognize that control. I updated the code above to reflect the changes. I'm new to using WPF and XAML, I don't get any errors in the UserControl just when I try to use it in the MainWindow.xaml
The class CheckBox(the type, that is) doesn't have a Dependency Property named OnColor and OffColor.
You need to create a new class, inheriting from CheckBox, and add to it those 2 new Dep Props.
Or use AttachedProperty instead.
So I created a very (and I can't stress that enough) simple program since I am just starting out learning WPF.
It's so simple, in fact, that I can write it all here:
<Window x:Class="TestWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="650" Width="825">
<Grid>
<StackPanel Width="125" Background="AliceBlue" Margin="0,10,200,10">
<Button Margin="5,5,5,5" Height="50" Width="100" Content="Tester" Background="Coral">
</Button>
</StackPanel>
</Grid>
But this program has a problem. The button flashes.
When I load up the program, the button is a coral colour (as expected). If I mouse over it, it turns back to the original colour (I guess that colour comes from the control that holds it? As you can see, I only specify one colour for the button.)
The issue comes when I click the button (left mouse). When I do this, the button transitions from one colour (coral) to the other (alice blue) over a period of about a second. It goes back and forth over and over. If I mouse over it in this state, it returns to the mouse over colour as it would do normally, but then when I take my mouse away from it, it starts flashing again.
To be clear: this is not about the change of colour on mouseover. I'm fine with that. After I click the button, said button transitions between two colours over and over again. The colours are coral and the mouse over colour, which of course I have not specified.
I am at a loss here. I've not told it to do this (have I?) I haven't clicked anything in the properties or written any code behind. The XAML is ALL that I have done.
Why on earth does the button flash?
Edit here are some images which show the entire thing. All code (there isn't any). The XAML, the app.xaml.cs, everything.
Edit 2 another image with all the button properties. I didn't change any, so far as I know.
The "flashing" you are experiencing probably comes from the default template of the Button. You can override it to make your Button look like a plain rectangle without any kind of effects:
<Button Margin="5,5,5,5" Height="50" Width="100" Content="Tester" Background="Coral">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Margin}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
This is because of the default styles in windows.
A normal button (on windows 7) transitions from a two tone grey to a two tone blue, it's triggered by the default control template.
You can edit the control template and set the style on the button..
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="650" Width="825">
<Window.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Width="125" Background="AliceBlue" Margin="0,10,200,10">
<Button Margin="5,5,5,5" Height="50" Width="100" Content="Tester" Background="Coral" Style="{DynamicResource ButtonStyle1}"/>
</StackPanel>
</Grid>
</Window>
You can now see where the other colours are coming from
Removing the attributes RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" from <Themes:ButtonChrome and the <ControlTemplate.Triggers> disables this behaviour
I have the below XAML
however I want when the user box clicked on any of the textblock in he list view I want the forecolor of the text to be unchanged (currently changed to white)
instead I want the border color to be changed
how can I do that?
ListView x:Name="LV" ItemsSource= "{Binding Lggv}" SelectionChanged="dataGridData_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Info }" AllowDrop="True" >
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCEE6C6" Offset="0.008"/>
<GradientStop Color="#FF9ECF8C" Offset="0.987"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</Border>
<Grid >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC5DDFF" Offset="0"/>
<GradientStop Color="#FFA8C8F7" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding DateTime}" ></TextBlock>
</Border>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding ComPort}"></TextBlock>
</Border>
<Border Grid.Column="2" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Data}" ></TextBlock>
</Border>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You should distinguish between the item content and the item container. Handling item selection style should be the responsibility of the container. The following style defines a replacement for the visual representation of a ListViewItem with some basic properties. Depending on your desired visual, you may want to define a different style.
Define the style as resource:
<Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Margin" Value="3"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightBlue"/>
</Trigger>
</Style.Triggers>
</Style>
The item will be displayed differently when the mouse is over (background color) and when the item is selected (red border). The foreground should stay untouched with this.
Usage:
<ListView ItemContainerStyle="{StaticResource ListViewItemStyle}">
<!-- your other code -->
</ListView>
I am trying to make the background not overflow the tab item in WPF. Here's what is happening (the blue background should not extend outside the border):
Here's my WPF XAML code:
<Window x:Class="DevelopmentConfigurator.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"
xmlns:local="clr-namespace:DevelopmentConfigurator"
mc:Ignorable="d"
Title="Development Configurator" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="467*"/>
</Grid.ColumnDefinitions>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2" Margin="10">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Background="{TemplateBinding Background}" Height="30">
<Border Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="0,2,2,0" Padding="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FF0067CD"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF00A0E8" Offset="0"/>
<GradientStop Color="#FF0067CD" Offset="1"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
<GradientStop Color="#FFCDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Packages">
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Updates" Padding="0" />
<TabItem Header="EnvironmentVariables" />
</TabControl>
</Grid>
</Window>
Move the background binding from the Grid to the Border of your template.
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Height="30">
<Border Name="Border" Background="{TemplateBinding Background}" ...
I have following Button in my c#WPF 3.5 .NET Application
<Button Height="23" x:Name="btnImportKvf" Width="75" Click="btnImportKvf_Click" IsEnabled="True" ToolTip="Click to Import" Content="Import KVF" />
My button style template applied in ResourceDirectory App.xaml as following
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna">
<!-- Focus Visual -->
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle
Margin="2"
StrokeThickness="1"
Stroke="#60000000"
StrokeDashArray="1 2"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SimpleStyles: Button -->
<Style TargetType="Button">
<!--Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/-->
<Setter Property="Foreground" Value="{StaticResource GlyphLightBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" Background="{DynamicResource BackgroundNormal}" BorderThickness="1,1,1,2" CornerRadius="4,4,4,4" BorderBrush="{DynamicResource GlyphDarkBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.507*"/>
<RowDefinition Height="0.493*"/>
</Grid.RowDefinitions>
<Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4" Background="{StaticResource GlowBrush}" />
<!--ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/-->
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" Grid.RowSpan="2"/>
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0" Background="{DynamicResource ShineBrush}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="{DynamicResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
</Trigger>
<!--Trigger Property="LostFocus">
<Setter Property="Background" TargetName="border" Value="{DynamicResource BackgroundNormal}"/>
</Trigger-->
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="shine" Value="0.4"/>
<Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
<Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource GlyphDarkBrush}" />
<Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
</Trigger>
<Trigger Property="IsCancel" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFEAEBF0" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Now I am doing localization in my project, so while changes language like french, then Button text would become big rather than button width, so I want auto texttrimming in button style. and full text display in tooltip.
Also i have second kind of button with Images and Text as following.
<Button Name="btnRefresh" Click="btnRefresh_Click" Width="69" ToolTipService.ToolTip="Click To Refresh" FontSize="11" Content="Refresh">
<Image Source="../Images/Refresh.png" Width="18" Height="13" />
</Button>
I also want to apply same style with this button too.
So is it possible to do this in same style template?
Please help me to solve this.
Thanks in Advance.
To do this, you need to change the ContentPresenter in your style to a Textblock, and bind its Text to your Content.
If you replace with something along those lines, you should be able to set text trimming as you like.
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
Background="{DynamicResource BackgroundNormal}"
BorderThickness="1,1,1,2"
CornerRadius="4,4,4,4"
BorderBrush="{DynamicResource GlyphDarkBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.507*"/>
<RowDefinition Height="0.493*"/>
</Grid.RowDefinitions>
<Border Opacity="0"
HorizontalAlignment="Stretch"
x:Name="glow"
Width="Auto"
Grid.RowSpan="2"
CornerRadius="4,4,4,4"
Background="{StaticResource GlowBrush}" />
<TextBlock Text="{TemplateBinding Content}"
TextTrimming="WordEllipsis"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.RowSpan="2"/>
<Border HorizontalAlignment="Stretch"
Margin="0,0,0,0"
x:Name="shine"
Width="Auto"
CornerRadius="4,4,0,0"
Background="{DynamicResource ShineBrush}"/>
</Grid>
</Border>
...
</ControlTemplate>
EDIT: regarding the second part of your question.
The last piece of code you show cannot work as you're setting the Content of your Button twice (I don't think it actually compiles).
The cleanest way of doing what you're trying to achieve is to define a custom Control class, as described here.
A "not so clean" hack could be to use the Tag field of your Button to store the image source URI like this:
<Button Name="btnRefresh"
Click="btnRefresh_Click"
Width="69"
ToolTipService.ToolTip="Click To Refresh"
FontSize="11" Content="Refresh"
Tag="../Images/Refresh.png" Width="18" Height="13" />
And then retrieve it in your style. This Grid replaces the Textblock in the previous solution:
<Grid Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" />
<TextBlock Text="{TemplateBinding Content}"
Grid.Column="1"
TextTrimming="WordEllipsis"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
The reason why the binding is slightly different is explained here.
But again, creating a custom Button with image and text is probably the cleanest way to do this!