I am trying to style some tabs but I ran into this issue where the color of the border changes as I resize window. First of all, I used this http://blogs.intuidev.com/post/2010/01/25/TabControlStyling_PartOne.aspx to style the tabs if you're wondering about the code.
Also, here is the pic of what's wrong.
EDIT:
<Color x:Key="BorderColor_Base">#888</Color>
<Color x:Key="TabControl_BackgroundColor_Base">#CCC</Color>
<SolidColorBrush x:Key="TabControl_BackgroundBrush_Base"
Color="{StaticResource TabControl_BackgroundColor_Base}"/>
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush"
StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99"
Color="{StaticResource BorderColor_Base}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItem_BorderBrush_Selected"
Color="{StaticResource BorderColor_Base}" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource TabItemPanel_BackgroundBrush}"
Padding="{StaticResource TabItemPanel_Padding}">
<TabPanel Grid.Row="0" IsItemsHost="True"/>
</Border>
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="{StaticResource TabControl_BackgroundBrush_Base}"
BorderBrush="{StaticResource TabItem_BorderBrush_Selected}"
Margin="{StaticResource TabItemMargin_Selected}"
BorderThickness="2,1,1,1">
<!-- This is where the Content of the TabItem will be rendered. -->
<Viewbox>
<TextBlock x:Name="Header">
<ContentPresenter x:Name="ContentSite"
ContentSource="Header"
Margin="7,2,12,2"
RecognizesAccessKey="True"/>
</TextBlock>
</Viewbox>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Base}" />
<Setter Property="Panel.ZIndex" Value="90" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="2,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Header" Property="Background" Value="#CCC" />
<Setter TargetName="Header" Property="Foreground" Value="#888" />
<Setter Property="Panel.ZIndex" Value="80" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The issue is with this brush:
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent" />
<GradientStop Offset="0.99" Color="{StaticResource BorderColor_Base}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
You are using a gradient from transparent to #888 as your background, so you are seeing one of the colors "in between" transparent and #888. Instead, you can use a Transparent background and border of #888, like so:
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Transparent" BorderBrush="#888" BorderThickness="0,0,0,1" Padding="{StaticResource TabItemPanel_Padding}"
SnapsToDevicePixels="True" />
<TabPanel Grid.Row="0" IsItemsHost="True" />
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may need to tweak the Margin of the Border and/or the TabPanel to ensure they line up correctly though.
Labas!
Try to increase line's height, for instance set it to 5 or 10 pixels. If color is wrong again it means that you wrong styled TabControl.
Related
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:
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}" ...
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>
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.
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>