After i applied a custom ItemContainerStyle on my listView, Highlighting a listView's item won't work as it supposed to, it only works when the mouse is over the ContentPresenter of the item as you can see in the screenshots:
Original highlight (with no style applied):
highlight when custom ItemContainerStyle applied
highlight when custom ItemContainerStyle applied (mouse over ContentPresenter)
ListView Style:
<Style x:Key="DetailStyle" TargetType="{x:Type ListView}">
<Setter Property="l:ListBoxSelector.Enabled" Value="True"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource DetailViewStyle}"/>
<Setter Property="View">
<Setter.Value>
<GridView AllowsColumnReorder="True">
<GridViewColumn Width="30" CellTemplate="{StaticResource columnIconDT}"/>
<GridViewColumn Header="Name" Width="100" CellTemplate="{StaticResource columnNameDT}"/>
<GridViewColumn Header="Size" Width="100" CellTemplate="{StaticResource columnSizeDT}"/>
</GridView>
</Setter.Value>
</Setter>
</Style>
ItemContainerStyle :
<Style x:Key="DetailViewStyle" TargetType="{x:Type ListViewItem}">
<EventSetter Event="ContextMenu.ContextMenuOpening" Handler="Item_ContextMenuOpening"/>
<EventSetter Event="PreviewMouseDoubleClick" Handler="Item_MouseDoubleClick"/>
<Setter Property="Margin" Value="0,0,0,-1"/>
<Setter Property="ContextMenu" Value="{DynamicResource ContextMenuForItem}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid HorizontalAlignment="Stretch">
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
<GridViewRowPresenter x:Name="gridrowPresenter" Content="{TemplateBinding Property=ContentControl.Content}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#33C1DEFF" Offset="0"/>
<GradientStop Color="#41A5CDFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#97C1DEFF" Offset="0"/>
<GradientStop Color="#A7A5CDFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="border" Value="#FFB4B4B4"/>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FE5E5E5" Offset="0"/>
<GradientStop Color="#B2CCCCCC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I fix it?
Your problem is that you have replaced the default ControlTemplate of the ListViewItem with your own definition and that definition does not contain the elements that highlighted the item on mouse over.
The solution is simple... find the default ControlTemplate and update your ControlTemplate with the missing elements... I'm guessing, that you at least need the VisualStateManager.VisualStateGroups element from the original ControlTemplate.
You can find full details of the default ControlTemplate of the ListViewItem from the ListView Styles and Templates page on MSDN.
UPDATE >>>
Dude, if you are going to override part of any control's ControlTemplate, you do it like this:
First, copy the whole default ControlTemplate into your new ControlTemplate and ensure that it is working properly. Then, and only then, can you start to adjust the contents, checking each time that you add or remove a few things, whether it still works as expected.
This is a fail-safe method and only sloppy work on your side could stop it from working... give it a go.
Related
I have created a resource dictionary for Button style and assigned it to a Button. The style appears in the button but I am not able to get the button text displayed. I have tried adding a content presenter but it didn't work. Please help.
<Button x:Name ="Submit" HorizontalAlignment="Left" Margin="346,186,0,0"
VerticalAlignment="Top" Width="75" Style="{DynamicResource
ResourceKey=ButtonStyle}" Height="50">
<ContentPresenter Name="MyContent">
<ContentPresenter.Content>
<Label>Click Me</Label>
</ContentPresenter.Content>
</ContentPresenter>
</Button>
The style for button is as follows..It is created using Blend..
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Margin="0,8,0,0" VerticalAlignment="Stretch" Stroke="#FF000000" RadiusX="23.489" RadiusY="23.489">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFDE9090" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also tried Button.Content> Click Button.Content> but not working.. Please suggest
Your button's ControlTemplate in Style missing a ContentPresenter to render the Content.
Add a ContentPresenter to the button's ControlTemplate. The resulting XAML for ControlTemplate would look like:
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Margin="0,8,0,0" VerticalAlignment="Stretch" Stroke="#FF000000" RadiusX="23.489" RadiusY="23.489">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFDE9090" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Also, like I said in my comment, you do not need a ContentPresenter in the XAML for Button itself. You could simply have your content between and tags.
<Button
x:Name="Submit"
Width="75"
Height="50"
HorizontalAlignment="Left"
Margin="346,186,0,0"
VerticalAlignment="Top"
Style="{DynamicResource ResourceKey=ButtonStyle}">
Click Me
</Button>
Read this MSDN page for more information on ControlTemplate.
I have a customized TextBox named "txtAddress" which contains Image and TextBox.
I need to be able to access its contents : txtAddress.Text txtAddress.Image
I've Bound the inner textBox.text with the Template.Text and inner rect.Fill with Template.Background (I'm using rectangular now, i will change it to image)
when I run the program and edit the textBox everything looks like its working and the text is changing, but when i use it from the code txtAddress.Text is still "my computer" which is the initial value of the TextBox.
I know that because i didn't put <ContentPresenter> somewhere in the style but where should i put the controls(image,textbox), like in listView there is <DataTemplate> where we add the controls
TxtAddress Style:
<Style x:Key="TextBoxAddressStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto">
<Rectangle Height="Auto" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Stretch" RadiusY="11" RadiusX="11" Margin="0" Fill="{TemplateBinding OpacityMask}"/>
<!--<ContentPresenter Height="Auto" Margin="31,2,7.458,2"/>-->
<TextBox x:Name="TxtAddress" Height="Auto" Margin="31,2,7.458,2" VerticalAlignment="Stretch" MaxLines="1" Text="{TemplateBinding Text}" AcceptsTab="True" Style="{DynamicResource TextBoxStyle2}" SelectionBrush="#C859003D" FontSize="{TemplateBinding FontSize}" AcceptsReturn="False"/>
<Rectangle Fill="#5AFFFFFF" HorizontalAlignment="Stretch" Height="6.375" Margin="6,2.25,6,0" RadiusY="6" RadiusX="6" Stroke="{x:Null}" VerticalAlignment="Top" Width="Auto" d:IsLocked="True"/>
<Rectangle x:Name="ImgAddress" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="24" Margin="7,1,0,0" RadiusY="0" RadiusX="0" VerticalAlignment="Top" Width="24" StrokeThickness="0">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="White"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
Inner TextBox Style:
<Style x:Key="TextBoxStyle2" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" FontSize="13.333" PanningMode="HorizontalOnly"/>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
TxtAddress :
<TextBox x:Name="txtAddress" Margin="34,5,32,0" TextWrapping="Wrap" Text="My Computer" Style="{DynamicResource TextBoxAddressStyle}" Height="25" VerticalAlignment="Top" FontWeight="Bold" MinHeight="25" MaxHeight="25">
<TextBox.Background>
<ImageBrush ImageSource="BtnImg/computer.png" Stretch="None"/>
</TextBox.Background>
<TextBox.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF779198" Offset="0.1"/>
<GradientStop Color="#FF789399" Offset="0.93"/>
<GradientStop Color="#FFBFD3D7" Offset="0.513"/>
<GradientStop Color="#FF343E41" Offset="1"/>
<GradientStop Color="#FF5C6E73"/>
</LinearGradientBrush>
</TextBox.Foreground>
<TextBox.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF94B5BD" Offset="0.1"/>
<GradientStop Color="#FF94B5BD" Offset="0.93"/>
<GradientStop Color="#FFE7FBFF" Offset="0.513"/>
<GradientStop Color="#FF7B9399" Offset="1"/>
<GradientStop Color="#FF7B9399"/>
</LinearGradientBrush>
</TextBox.OpacityMask>
</TextBox>
thanks in advance.
You're placing a TextBox inside the Template for another TextBox.
The visual tree will look like this:
TextBox
Grid
Rectangle
TextBox
Rectangle
Rectangle
Which is not ideal in the first place, but if you want to keep things like that, just make sure you bind the inner TextBox's Text property to the outer one, via Two Way, UpdateSourceTrigger=PropertyChanged Data Binding like so:
<TextBox x:Name="TxtAddress" Text="{Binding Text,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource AncestorType={x:Type TextBox}}}" ... />
In addition to all this, I already mentioned several times that you're NOT supposed to be manipulating UI elements in procedural code in WPF.
Instead, create a proper ViewModel to store your data:
public class MyViewModel
{
public string Text {get;set;}
}
then use DataBinding to bind your TextBox to that data:
<TextBox Text="{Binding Text}"/>
And whenever you need to retrieve the value, retrieve the value from the VM, NOT the UI.
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'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