I expect the following Style to affect any Border that is child of the Expander object to which this Style is applied to have a 1-pixel thick gray border. Why doesn't it work?
<Style TargetType="Expander">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border>
<Border.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Border.Resources>
<ContentPresenter Content="{Binding}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I custom to stlye tab item. but the first child dont same level with content area. picture. How to fix this. default tabcontrol thers border around border around tabitem.
<Application.Resources>
<Style x:Key="BlueOcean" TargetType="{x:Type TabControl}">
<Style.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Height" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<StackPanel Name="Panel">
<ContentPresenter
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
</Style>
</Application.Resources>
TabControl View
<TabControl Style="{DynamicResource BlueOcean}" TabStripPlacement="Left">
<TabItem Header="Home" Content="Home Page" />
<TabItem Header="Settings" Content="Settings Page" />
</TabControl>
I'm trying to set up a trigger that removes the padding on the listview when the scrollbar is hidden.
I put the trigger on the listview style but I'm getting inconsistent results. For example the background property in the trigger is always active no matter what the scrollbar visibility is.
I've taken a look at the MSDN for the ScrollViewer.ComputedVerticalScrollBarVisibility Property but am not having much luck figuring out what's wrong.
<ListView Grid.Row="1" Grid.Column="1" BorderBrush="{x:Null}" BorderThickness="0" ItemsSource="{Binding Tasks}" Margin="5"
ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- SNIP -->
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Style>
<Style>
<Setter Property="ListView.Padding" Value="0,0,5,0"/>
<Setter Property="ListView.Background" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="ScrollViewer.ComputedVerticalScrollBarVisibility" Value="Hidden">
<Setter Property="ListView.Padding" Value="0"/>
<Setter Property="ListView.Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
I write an ListView style example which worked for me. I tried it.
<Style TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<ScrollViewer>
<ScrollViewer.Style>
<Style TargetType="ScrollViewer">
<Style.Triggers>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Visible">
<Setter Property="Padding" Value="100"/>
</Trigger>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Collapsed">
<Setter Property="Padding" Value="10"/>
</Trigger>
</Style.Triggers>
</Style>
</ScrollViewer.Style>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I try to create a ListView which doesn't have a hover and selected style but has alternating colors for the ListViewItem's.
To disable the styles I set the ItemContainerStyle. The problem is that the expression ListView.AlternationIndex is somehow allways evaluating to 0 as Christian Mosers WPF Inspector tells me. This results in that the background color for all items is red.
<ListView ItemsSource="{Binding Configuration}" AlternationCount="2" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="ListView.AlternationIndex" Value="0">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="ListView.AlternationIndex" Value="1">
<Setter Property="Background" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
How can I color the items alternating wihout having the selected and hover style?
(The background color of the first item should be red the one of the second blue the one of the third red again and so on)
(The Backgroundcolor, border, padding, margin and so on should not change when the mouse is over an ListViewItem or a ListViewItem is selected)
EDIT: Thanks for the answers. I changed added a template binding to the solution to get rid of the Name property.
<ListView ItemsSource="{Binding Configuration}" AlternationCount="2" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="ListBox.AlternationIndex" Value="0">
<Setter Property="Border.Background" Value="Red" />
</Trigger>
<Trigger Property="ListBox.AlternationIndex" Value="1">
<Setter Property="Border.Background" Value="Blue" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Put the triggers in <ControlTemplate.Triggers>:
<ListView ItemsSource="{Binding Configuration}" AlternationCount="2" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Red" TargetName="Border" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Blue" TargetName="Border" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
The triggers have to be on the control template; the Border doesn't know anything about its parent.
But since the property to set (Background) is on the Border, you have to name it and use TargetName.
<ListView AlternationCount="2" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border Name="border">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" TargetName="border" Value="Red" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" TargetName="border" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="ABC"/>
<ListViewItem Content="DEF"/>
<ListViewItem Content="GHI"/>
<ListViewItem Content="JKL"/>
</ListView>
This XAML produces the desired result:
I am using WPF Toolkit Area Chart control. I am not able to change background of the Area Series to any other color. It just assigns color code #FFFFA500.
My XAML code is as below
<chartingToolkit:Chart.Palette x:Uid="tt">
<datavis:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="#FF3EA0C0"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="#FF44C8F5"/>
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
</chartingToolkit:Chart.Palette>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:AreaSeries Background="Black" x:Name="SecondSeries" DependentValuePath="Value" IndependentValuePath="Key" IsSelectionEnabled="True">
<chartingToolkit:AreaSeries.DataPointStyle>
<Style TargetType="chartingToolkit:AreaDataPoint">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:AreaDataPoint">
<Button Name="pointButton" Content="{Binding}" Click="pointButton_Click_1" BorderThickness="1" >
<Button.Template>
<ControlTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Value}" Cursor="Hand"></TextBlock>
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:AreaSeries.DataPointStyle>
<chartingToolkit:AreaSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Orientation="Y" FontFamily="Rockwell" Title="Expenses" FontSize="14" >
</chartingToolkit:LinearAxis>
</chartingToolkit:AreaSeries.DependentRangeAxis>
</chartingToolkit:AreaSeries>
</chartingToolkit:Chart>
Please help me out. This is driving me crazy.
The problem is that there is a Grid within the AreaSeries control Template which has a style applied to it setting the background to a LinearGradientBrush.
In order to change the background of the plot area, add this style
<Style TargetType="Grid" x:Key="plotStyle">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Pink"/>
</Setter.Value>
</Setter>
</Style>
and use it as the Chart control's PlotAreaStyle
<chartingToolkit:Chart Background="Black" PlotAreaStyle="{StaticResource plotStyle}">
I have these styles defined:
<Style x:Key="ImgButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>
<Style x:Key="ImgButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="ButtonImage" Stretch="Uniform" Height="20" Width="20" Source="">
</Image>
<TextBlock Name="ButtonText" Margin="4,0" VerticalAlignment="Center" Text=""></TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I want to create another style, LoginButtonWithText (shown below), that is based on ImgButtonWithText, and which sets the value of the Source property of the ButtonImage control in the ImgButtonWithText style. I want to do the same with the Text property of the ButtonText textblock.
<Style x:Key="LoginButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButtonWithText}">
<Setter Property="ToolTip" Value="Login"></Setter>
<Setter Property="IsDefault" Value="True"></Setter>
//How do I set the Image Source value and TextBlock Text value here?
</Style>
I found this question, but it doesn't appear to be quite exactly what I'm looking for. How do I change the value of child controls from an inherited style, or am I doing it all wrong?
It seems that what I want to do is not exactly possible, but I've done the next best thing in defining an image button style to use in all styles that inherit from from ImgButtonWithText:
<Style x:Key="ImgButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>
<Style x:Key="ButtonImage" TargetType="Image">
<Setter Property="Height" Value="20"></Setter>
<Setter Property="Width" Value="20"></Setter>
<Setter Property="Stretch" Value="Uniform"></Setter>
</Style>
<Style x:Key="ButtonText" TargetType="TextBlock">
<Setter Property="Margin" Value="4,0"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
<Style x:Key="LoginButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="ButtonImage" Style="{StaticResource ButtonImage}" Source="../Images/login.png">
</Image>
<TextBlock Name="ButtonText" Style="{StaticResource ButtonText}" Text="Let's Go"></TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>