I want to change the foreground from a trigger when I press the button, here is the XAML I have so far:
<Window.Resources>
<SolidColorBrush x:Key="FocuseBorder" Color="DarkBlue" ></SolidColorBrush>
<SolidColorBrush x:Key="OverBorder" Color="Blue" />
<SolidColorBrush x:Key="PressdBorder" Color="Red" />
<SolidColorBrush x:Key="DefulateBorder" Color="Black" ></SolidColorBrush>
<LinearGradientBrush x:Key="GradDefulat" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF949494" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradOver" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF949494" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradPressd" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF666868" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradFocuse" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="grd" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Border x:Name="TheBorder" CornerRadius="10"
Background="{StaticResource GradDefulat}" Height="{Binding Path=Height}" Width="{Binding Path=Width}"
BorderBrush="DarkSlateBlue"> </Border>
<Rectangle Name="rect" Fill="{StaticResource GradDefulat}" Stroke="DarkSlateBlue"
Height="200" Width="50">
<Rectangle.RenderTransform >
<RotateTransform Angle="45" CenterX=" 30" CenterY="25" >
</RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter x:Name="ContentArea" VerticalAlignment="Center" HorizontalAlignment="Center "
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers >
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="TheBorder" Property ="Background" Value="{StaticResource GradDefulat}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource DefulateBorder}"/>
<Setter TargetName="rect" Property ="Fill" Value="{StaticResource GradDefulat}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource DefulateBorder}"/>
</Trigger>
<!-- Defaulated-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradOver}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource OverBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradOver}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource OverBorder}"/>
</Trigger>
<!-- Over-->
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradFocuse}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource FocuseBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradFocuse}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource FocuseBorder}"/>
</Trigger>
<!--Focuse-->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradPressd}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource PressdBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradPressd}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource PressdBorder}"/>
</Trigger>
<!-- Focuse-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
English isn't my first language, so I apologize for the lack of detail.
Related
Trigger is not working. IsMouseOver is not changing style of the Button. I am not sure what is wrong with my code. I am trying to change the style property of the button on mouse over property. It keeps throwing error.
Basically I am trying to use different style on mouse over event
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Style" Value="{StaticResource ResourceKey=FancyButtonInvertStyle}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="FancyButtonInvertStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
Instead of trying to change the Style in the Trigger, change the Background directly in it. Keeps you also from repeating the Style completely over again.
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I'm not sure if you even can change the Style of itself in the Trigger the way you intend to, because it is not set via a Setter Tag in the target control itself.
I have a TabControl Template and style, but i am having some issues with the clickable are in the tabs.
You will notice that my tab (Border below) has a width and height specified, but unfortunately, the entire border is not clickable, it is only the text inside it, so if i have one letter in the tab, you have to point your mouse exactly on the letter to select the tab.
How can i make it that if you click anywhere on inside the border it selects the tab?
Here is my ControlTemplate:
<Style x:Key="MainTabItem" TargetType="TabItem">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="#EAF1F7" CornerRadius="3,3,0,0" Height="60" Width="70" Margin="-2,0,2,0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EDF1FA" Offset="0"/>
<GradientStop Color="#EAF1F7" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="BorderThickness" Value="0" />
<Setter TargetName="Border" Property="BorderThickness" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainTabControl" TargetType="TabControl">
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="BorderBrush" Value="#CFE2F0"></Setter>
<Setter Property="Background" Value="#EAF1F7"/>
<Setter Property="BorderBrush" Value="#EAF1F7"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="150" BlurRadius="20" ShadowDepth="5" Opacity=".3"/>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#EAF1F7" />
<GradientStop Offset=".2" Color="#EAF1F7" />
<GradientStop Offset=".6" Color="#C7D7E4" />
<GradientStop Offset="1" Color="#EAF1F7" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
To the border add Background="Transparent".
The reason is that default value for background is null, and pixels with 'null' value are not hit test visible. Transparent pixels are hit test visible (and that's the main reason why 'null' and 'Transparent' exist together).
I have the following style defined in my Resource Dictionary:
<!-- ListViewItem Styles-->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
<!-- /ListViewItem Styles-->
When i was using windows XP the behavior that I was getting was my gradients were used for the Hightlight and the selection. Now i have switched over to using Windows 7 and it seems like the gradients are no longer used the highlight/selection colors are now the light blue of the VS look.
Any suggestions on why this would be happening and how do I fix this in such a way that it works the same on Windows XP and Windows 7 (we have a multiplatform environment)
Thank you.
Full Solution after comments
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<!-- This part of the triger is for when Windows Aero theme is turned on Win Vista/7-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
The default Style on Aero is a bit different then the Luna themes. In Aero, there is a trigger like so in the default Style:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}"/>
<!-- ... -->
</Trigger>
While on Luna, it looks like:
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>
So you can see the default Style for Aero, doesn't use the HighlightBrushKey at all. This is mostly because those brushes are based on a single solid color. But the Aero theme has a lot of gradients, which can't be represented by the old style colors.
You would need to set the Background property as well to apply it on Aero, like so:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>
I'm trying to change the default light gray highlight on a selected ListViewItem to be the blue highlight that shows up when the ListView is focused. I've been trying to reconcile different StackOverflow answers and sources online, but I haven't figured out what kind of XAML I need yet. I have the following:
<ListView ItemContainerStyle="{StaticResource checkableListViewItem}"
SelectionMode="Multiple"
View="{StaticResource fieldValueGridView}"/>
The referenced View resource is:
<GridView x:Key="fieldValueGridView" AllowsColumnReorder="False">
<GridViewColumn Header="Field">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Text="{Binding Path=DisplayName}"/>
<TextBlock FontWeight="Bold" Text=": "/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Value" DisplayMemberBinding="{Binding Path=FieldValue}"/>
</GridView>
And the referenced ItemContainerStyle resource is:
<Style TargetType="ListViewItem" BasedOn="{StaticResource {x:Type ListViewItem}}"
x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
The ListView's IsEnabled property does change, if that matters. I wanted to somehow incorporate <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.HighlightColor}"/>, or something similar, to highlight selected ListViewItems that are in an unfocused ListView.
I have the following style, but this does not seem to affect ListViewItems in my ListView, and I thought the GridView that I'm using might be the reason. When I tried to override the Template property, the View property got ignored so my GridView wasn't being displayed.
<Style TargetType="ListViewItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="{x:Static SystemColors.HighlightColor}"/>
</Style.Resources>
</Style>
How do I highlight in blue the selected items in my ListView when that ListView is unfocused?
This will work for a ListView that doesn't have a GridView
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Style.Resources>
</Style>
Update
1.Without re-templating when using GridView
<LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="ListViewItem" x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</Trigger>
<!-- Or if you want to choose another color for unfocused
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</MultiTrigger>
-->
</Style.Triggers>
</Style>
2. Re-templating the ListViewItem when using GridView.
<LinearGradientBrush x:Key="ListItemHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF1FBFF" Offset="0"/>
<GradientStop Color="#FFD5F1FE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedInactiveFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEEEDED" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEAF9FF" Offset="0"/>
<GradientStop Color="#FFC9EDFD" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="ListViewItem" x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border CornerRadius="2" SnapsToDevicePixels="True"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<Border Name="InnerBorder" CornerRadius="1" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="11" />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Name="UpperHighlight" Visibility="Collapsed" Fill="#75FFFFFF" />
<GridViewRowPresenter Grid.RowSpan="2"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemHoverFill}" />
<Setter Property="BorderBrush" Value="#FFCCF0FF" />
<Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
<Setter TargetName="InnerBorder" Property="BorderBrush" Value="#80FFFFFF" />
<Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
<Setter TargetName="UpperHighlight" Property="Fill" Value="#40FFFFFF" />
</Trigger>
<!--<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}" />
<Setter Property="BorderBrush" Value="#FFCFCFCF" />
</MultiTrigger>-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have to create a custom styled button. The problem is that although i change everything when mouseovering it or when it has focus it gets the original colors!
Tried to set FocusVisualStyle="{x:Null}" but it keeps doing it....
<Button Content="Button" Height="143" Margin="85,76,190,0" VerticalAlignment="Top" FocusVisualStyle="{x:Null}" Background="#FFE9D7D7"/>
what can i do?
The visuals you are seeing may be coming from the default control template, which includes window chrome. You may want to try creating a custom template for the button, which will give you full controls of the visual elements.
The default button template is the overriding your style. so you have crete your own control template for the button. Here is one example.
<Style x:Key="InformButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontSize" Value="11px"/>
<Setter Property="FontWeight" Value="Bold"/>
<!--<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}" />-->
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FFFFD190" Offset="0.2"/>
<GradientStop Color="Orange" Offset="0.85"/>
<GradientStop Color="#FFFFD190" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="contentShadow"
>
<ContentPresenter.RenderTransform>
<TranslateTransform X="1.0" Y="1.0" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
<Setter Property="Foreground" Value="#FF4788c8" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FFFFD190" Offset="0.35"/>
<GradientStop Color="Orange" Offset="0.95"/>
<GradientStop Color="#FFFFD190" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="content" Property="RenderTransform" >
<Setter.Value>
<TranslateTransform Y="1.0" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Opacity" Value="0.7" />
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Even though you defined a custom style, the button still inherits some properties from the default style if you didn't set them in your custom style. So you have two options:
set OverridesDefaultStyle to true on the button so that it doesn't inherit the default style
set the background/border/foreground brushes explicitly in the custom style