WPF - Change background textbox with gradient

WPF - Change background textbox with gradient - c#

How do I change the background of a textbox with gradient fill when it has focus?
I am trying to create style for a TextBox user control that will have a gradient background when the user has gives it focus, here is what I have so far.
<Style TargetType="{x:Type TextBox}" x:Key="TextBoxNormal" >
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<!--<Setter Property="MinWidth" Value="100"/>-->
<Setter Property="Height" Value="25"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="3"/>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border x:Name="errorBorder" Background="Red" DockPanel.Dock="right" Margin="5,0,0,0" Width="10" Height="10" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" FontSize="8" Foreground="white" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border x:Name="Border"
BorderThickness="1"
CornerRadius="3"
Padding="0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#AAAAA1" Offset="0" />
<GradientStop Color="#AAAAA1" Offset=".2" />
</LinearGradientBrush>
</Border.BorderBrush>
<ScrollViewer x:Name="PART_ContentHost" Margin="0">
<ScrollViewer.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#ededed"/>
<GradientStop Offset=".91" Color="White"/>
</LinearGradientBrush>
</ScrollViewer.Background>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#EEEEEE"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#EEEEEE"/>
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="Margin" Value="0 0 15 0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Here is a pretty straight forward way of doing it in Xaml, using a LinearGradientBrush to set the TextBox.Background property when TextBox.IsFocused is true.
<TextBox Width="100" Height="20">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Edit : In your ControlTemplate.Triggers you need to add a trigger that sets the background of your ScrollViewer, try adding the following trigger to your style's ControlTemplate.Triggers.
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_ContentHost" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>

Related

Rounded edge 3D style button in WPF

I am trying to create a round edge 3D shape styled button in WPF. I want to create a button look like this image.
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground" Opacity="1" RadiusX="9" RadiusY="9"
Fill="{TemplateBinding Background}" StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#002060" Offset="0" />
<GradientStop Color="#002060" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top" RadiusX="8" RadiusY="8"
Opacity="1" Stroke="Transparent" Height="5px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#002060" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkBlue">
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" TargetName="GelBackground" Value="Blue">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#002060"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="55"/>
<Setter Property="Height" Value="30"/>
</Style>
I used above code for creating button but it will not giving expected result. look like this.
Any help will be appreciated.

You can use borders inside a button template with a blur-effect to achive the requested result:
<Button Content="English" Width="100" Height="50">
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border CornerRadius="5" Background="{TemplateBinding Background}" Name="button" Width="100">
<Grid>
<Border BorderThickness="1,0,1,1" BorderBrush="Black" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border BorderThickness="0,1,0,0" BorderBrush="White" Margin="2" Opacity="0.7" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#002060" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="Consolas" />
</Style>
</Button.Style>
</Button>
Result:

Change MergedDictionaries at runtime

I'm currently working on a WPF application that allows the user to change its theme during runtime (without any restart). I'm currently using the code from here:
http://svetoslavsavov.blogspot.de/2009/07/switching-wpf-interface-themes-at.html
I modified it with a Try statement:
private static void ApplyTheme(FrameworkElement targetElement, Uri dictionaryUri)
{
if (targetElement == null) return;
try
{
ResourceDictionary themeDictionary = null;
if (dictionaryUri != null)
{
themeDictionary = new ResourceDictionary();
themeDictionary.Source = dictionaryUri;
targetElement.Resources.MergedDictionaries.Insert(0, themeDictionary);
}
List<ResourceDictionary> existingDictionaries =
(from dictionary in targetElement.Resources.MergedDictionaries.OfType<ResourceDictionary>()
select dictionary).ToList();
foreach (ResourceDictionary thDictionary in existingDictionaries)
{
if (themeDictionary == thDictionary) continue;
try
{
targetElement.Resources.MergedDictionaries.Remove(thDictionary);
}
catch { }
}
}
finally { }
}
But it doesn't really work if I have styled ScrollBars in my application. The first time it always turns the same ComboBox into a rectangle and you can't use it anymore:
http://goo.gl/eNC2m0
The second time it throws an exception:
Unable to cast object of type 'MS.Internal.NamedObject' to type 'System.Windows.FrameworkTemplate'.
If I remove the Try statement, it already throws the exception on the first time.
The ScrollBar style looks like this:
<!-- Colors -->
<Color x:Key="Accent">#FFFEB809</Color>
<SolidColorBrush x:Key="AccentBrush" Color="{StaticResource Accent}"/>
<Color x:Key="AccentConsole">#22FEB809</Color>
<SolidColorBrush x:Key="AccentConsoleBrush" Color="{StaticResource AccentConsole}"/>
<Color x:Key="AccentLight">#FFFFDB82</Color>
<SolidColorBrush x:Key="AccentLightBrush" Color="{StaticResource AccentLight}"/>
<Color x:Key="AccentLightConsole">#22FFDB82</Color>
<SolidColorBrush x:Key="AccentLightConsoleBrush" Color="{StaticResource AccentLightConsole}"/>
<Color x:Key="AccentText">#FFFFFFFF</Color>
<SolidColorBrush x:Key="AccentTextBrush" Color="{StaticResource AccentText}"/>
<Color x:Key="Border">#FFCCCCCC</Color>
<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource Border}"/>
<Color x:Key="CaptionBar">#FFFCFCFC</Color>
<SolidColorBrush x:Key="CaptionBarBrush" Color="{StaticResource CaptionBar}"/>
<Color x:Key="ConsoleBackground">#FF222222</Color>
<SolidColorBrush x:Key="ConsoleBackgroundBrush" Color="{StaticResource ConsoleBackground}"/>
<Color x:Key="ControlBackground">White</Color>
<SolidColorBrush x:Key="ControlBackgroundBrush" Color="{StaticResource ControlBackground}"/>
<Color x:Key="NavigationHeader">#88000000</Color>
<SolidColorBrush x:Key="NavigationHeaderBrush" Color="{StaticResource NavigationHeader}"/>
<Color x:Key="Window">#FFFAFAFA</Color>
<SolidColorBrush x:Key="WindowBrush" Color="{StaticResource Window}"/>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}"/>
<Setter Property="Height" Value="24"/>
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
<Setter Property="Width" Value="24"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Border Background="#22000000" CornerRadius="4">
<Track Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<!-- The problem occurs here -->
<Thumb Style="{StaticResource HorizontalScrollBarThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Border Background="#22000000" CornerRadius="4">
<Track Name="PART_Track" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<!-- The problem occurs here -->
<Thumb Style="{StaticResource VerticalScrollBarThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="HorizontalScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="24"/>
</Grid.ColumnDefinitions>
<RepeatButton Style="{StaticResource LeftScrollBarLineButton}" Command="ScrollBar.LineLeftCommand"/>
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="0,1,0,1" Grid.Column="1">
<TextBlock Text="" FontFamily="Segoe UI Symbol" Foreground="#FF585858" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<RepeatButton Style="{StaticResource RightScrollBarLineButton}" Command="ScrollBar.LineRightCommand" Grid.Column="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VerticalScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<RepeatButton Style="{StaticResource TopScrollBarLineButton}" Command="ScrollBar.LineUpCommand"/>
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1,0,1,0" Grid.Row="1">
<TextBlock Text="" FontFamily="Segoe UI Symbol" Foreground="#FF585858" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<RepeatButton Style="{StaticResource BottomScrollBarLineButton}" Command="ScrollBar.LineDownCommand" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LeftScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="4,0,0,4" BorderThickness="1,1,0,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.RelativeTransform>
<RotateTransform Angle="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RightScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="0,4,4,0" BorderThickness="0,1,1,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.RelativeTransform>
<RotateTransform Angle="90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TopScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="4,4,0,0" BorderThickness="1,1,1,0">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BottomScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="0,0,4,4" BorderThickness="1,0,1,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="{StaticResource AccentLight}" Offset="1"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when I replace <Thumb Style="{StaticResource HorizontalScrollBarThumb}"/> and <Thumb Style="{StaticResource VerticalScrollBarThumb}"/> with <Thumb/> it works.
I just can't find anything in the Thumb styles that could cause this problem.
Thanks for your help.

This is because of the order of templates. Just change the order of the templates as given in following image. StaticResources should be parsed before it is referred in XAML.
Also the XAML code you pasted above missing some brush resources like AccentLight,ControlBackgroundBrush. I don't know whether those resources defined in your application in the proper hierarchy. Check that also.

WPF Change size of menuitem

I have a Menu made in MVVM, but my Menuitem are big as shown here
http://i49.tinypic.com/wi1vk3.png
So in my Mainwindow I have a menu that binds to a list of menu.
In my View
<Menu VerticalAlignment="Top">
<MenuItem Header="File" ItemsSource="{Binding MenuList}" />
</Menu>
And in my ViewModel
List<MenuViewModelBase> _menuList = new List<MenuViewModelBase>();
_menuList.Add(new MenuViewModel("New", NewCommand));
_menuList.Add(new MenuViewModel("Open", OpenCommand));
_menuList.Add(new MenuViewModel("Save", SaveCommand));
_menuList.Add(new MenuViewModel("Exit", ExitCommand));
My MenuView is
<MenuItem>
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="Command" Value="{Binding ActionCommand}" />
</Style>
</MenuItem.Resources>
</MenuItem>
Can someone tell me how to resize the menuitem to match their content?

I believe what you're seeing is the space the default template reserves for InputGestureText. If you want to remove that area I believe your best bet is to implement your own template for the menu item. Using the default template as a starting point it should be fairly easy to modify it to get what you're looking for.
Update:
I've included an example in which I copied the MenuItem style from the above link and added it to my project. I then removed the Icon and InputGesture areas from the SubMenuHeaderTemplate. In general, if you see default behavior that you'd like to change you can try to change via a style and if that doesn't work you can override the default template using the ones provided by Microsoft as a base.
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Window.Resources>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<!--Border colors-->
<Color x:Key="BorderMediumColor">#FF888888</Color>
<LinearGradientBrush x:Key="MenuPopupBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>
<!-- TopLevelHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="1"
Background="{DynamicResource MenuPopupBrush}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer CanContentScroll="True" Style="{StaticResource MenuScrollViewer}">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{StaticResource ControlLightColor}" />
<GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- TopLevelItem -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{StaticResource ControlLightColor}" />
<GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuItem -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid>
<ContentPresenter x:Name="HeaderHost" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="{DynamicResource ControlMouseOverColor}" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid>
<ContentPresenter x:Name="HeaderHost" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Right" HorizontalOffset="-4" IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" Background="{DynamicResource MenuPopupBrush}"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer CanContentScroll="True" Style="{StaticResource MenuScrollViewer}">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="{DynamicResource ControlMouseOverColor}" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- MenuItem Style -->
<Style x:Key="{x:Type MenuItem}"
TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Style.Triggers>
<Trigger Property="Role"
Value="TopLevelHeader">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}" />
<Setter Property="Grid.IsSharedSizeScope"
Value="true" />
</Trigger>
<Trigger Property="Role"
Value="TopLevelItem">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuHeader">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuItem">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="Red">
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="This is a menu item without InputGesture area"/>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Window>

MultiDataTrigger does not work?

I want to have a MultiDataTrigger for my TabControl. When the tab is hovered it should change the color. But not if the Tab is selected. I tried a MultiDataTrigger. But it does not seem to work. Here is my Style:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5,0.5,0.5,0" CornerRadius="4,4,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">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#fefeff" Offset="0" />
<GradientStop Color="#e7edf6" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#c5d0df" Offset="0" />
<GradientStop Color="#aab4c2" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsMouseOver}" Value="True" />
<Condition Binding="{Binding Path=IsSelected}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#dde6f2" Offset="0" />
<GradientStop Color="#c6d0de" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Is there something wrong?

Change your trigger to be:
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
As per AngelWPF's answer a DataTrigger will attempt to bind to the current DataContext, where it will find nothing matching the properties.

DataTriggers use the DataContext as the source. And I am sure that IsMouseOver and IsSelected are not properties from your data context, they are properties of the tab item.
I suggest use normal MultiTrigger with normal Trigger Conditions in it.

WPF/C#: Creating a button style: Text + Image

I just want to ask how should I put my image (dynamically) in this following code:
<Style x:Key="ButtonStyler" TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="black" Offset="0" />
<GradientStop Color="black" Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40" />
<Setter Property="Foreground" Value="white" />
<Setter Property="Grid.Row" Value="2" />
<Setter Property="Grid.Column" Value="3" />
<Setter Property="Content" Value="Forgot your password?" />
<Setter Property="ContentTemplate"
Value="{DynamicResource myContentTemplate}" />
<Setter Property="Margin" Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground"
Opacity="1"
RadiusX="9"
RadiusY="9"
Fill="{TemplateBinding Background}"
StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="white"
Offset="0" />
<GradientStop Color="#666666"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine"
Margin="2,2,2,0"
VerticalAlignment="top"
RadiusX="6"
RadiusY="6"
Opacity="1"
Stroke="transparent"
Height="15px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ccffffff"
Offset="0" />
<GradientStop Color="transparent"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter x:Name="GelButtonContent"
VerticalAlignment="center"
HorizontalAlignment="center"
Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="lime"
Offset="0" />
<GradientStop Color="DarkGreen"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffcc00"
Offset="0" />
<GradientStop Color="#cc9900"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
</Style.Triggers>
</Style>
I am planning to set the image's file destination in my code-behind (C#). For the output, the WPF button can both display the text and the image (placed in the right side of the text)
Any suggestions?

Your template includes a ContentPresenter, bound to the Content of the Button. So, you can simply set the image and/or text as the content of the button and they will go there.
<Button Style="{StaticResource ButtonStyler}">
<StackPanel Orientation="Horizontal">
<Image Source="..." />
<TextBlock Text="..." />
</StackPanel>
</Button>

just try this link. In this they created custom implementation of the button and a dependency property ImageSource so the you can use either from the code behind or from the XAML
Creating an image+text button with a control template?

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

WPF - Change background textbox with gradient - c#

Related

Rounded edge 3D style button in WPF

Change MergedDictionaries at runtime

WPF Change size of menuitem

MultiDataTrigger does not work?

WPF/C#: Creating a button style: Text + Image

Categories

Resources