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).
Related
When I do this: IsEnabled="False"the list of course gets disabled, but it also get the white frame indicating that it is disabled. I would like to get rid of that white frame and show no indication to the user. How to do this?
Adding this template solved the problem:
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border Name="Border">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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.
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.
I'm doing a slight modification to code I found on a related stackoverflow post. I made minor changes to a ListBoxItem's background on IsMouseOver and IsSelected using a trigger. In my version I want to use a gradient for the background:
<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="1,2,1,1"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border Background="{TemplateBinding Background}" />
<Border Background="LightGray" Margin="0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--<Border Margin="2,1,2,0" Grid.Row="0" Background="#57FFFFFF" />-->
<Border Margin="2,1,2,0" Grid.Row="0">
<Border.Background >
<LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" >
<GradientStop Color="White" Offset="0" />
<GradientStop Color="LightGray" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
<ContentPresenter Margin="0,5" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Background" Value="#CCCBAF00" />
<Setter Property="Opacity" Value="0.8" />-->
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
<GradientStop Color="#CCC9BA5C" Offset="0" />
<GradientStop Color="#CCCBAF00" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="#CCCB6400" />
<Setter Property="Opacity" Value="0.8" />-->
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
<GradientStop Color="#CCCD8B4C" Offset="0" />
<GradientStop Color="#CCCB6400" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="ItemContainerStyle" Value="{DynamicResource ListboxItemStyle}" />
<Setter Property="Margin" Value="3,3,2,1" />
</Style>
But it doesn't work with this modification. Thanks!
Just switch
<Border Background="LightGray" Margin="0,0">
to something like
<Border Background="LightGray" Margin="0,0" Opacity="0.5">
to make the ^^ Border see-through
I can see that you have one Border control overlapping another. The first Border (whose Background is bound to template) will never be visible. So, when you change the ListBoxItem's background in trigger, you don't see it because it is hidden below another border.
You can either have just one border control or set the visibility to second border control to hidden in your triggers.
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