Change properties of controls from inherited styles in wpf xaml - wpf

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>

Related

WPF Listview Scrollbar Visibility Trigger

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>

Multiple Style Resource in WPF Metro Button

I am trying to achieve my save button to reusable button and original button style is like this=>
<Button Margin="5"
Padding="0"
Width="98"
Cursor="Hand"
x:Name="btnSave"
Click="btnSave_Click">
<StackPanel Orientation="Horizontal" Height="25" Width="90">
<Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
</Button>
Just text and image. So I just want to use this button as a reusable button. So I move this button to App.xaml Like this=>
<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Background" Value="Red"/>
<Style.Resources>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Other/Save.ico"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Margin" Value="3 0"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="15 0"/>
<Setter Property="Text" Value="Save"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
But after moving that, This button is not working anymore. Please let me know why this one is not working.
You said you wanted to reuse styles, so you shouldn't nest them. The right thing to do is:
<Style x:Key="SaveButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
<Image/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to define the StackPanel somewhere and set the Button's Content property to it. You may define the StackPanel as a non-shared resource next to the Style in App.xaml like this:
<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
<Image Source="screen.png" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
<Style TargetType="Button" x:Key="SaveButton">
<Style.Resources>
</Style.Resources>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Content" Value="{StaticResource sp}" />
</Style>

Creating a style based on another which is using a data template

I have a style for a ListBox using TextBoxes as defined below:
<Style x:Key="MyListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I use this style for a number of ListBox display readonly data.
What I also have is a group of ListBoxes in which I would like to be able to click on one of the TextBoxes in them and then perform some action. So what I want to do is attach a Click event on the TextBox. Ideally I'd like to leverage the above style without having to retype it all and just add a new style which added the event binding. How would yo go about this?
Style.BaseOn
<Style x:Key="MyListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyListBoxStyle2" BasedOn="{StaticResource MyListBoxStyle}" TargetType="ListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray" GotFocus="TextBox_GotFocus"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

How Style applies to child controls?

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>

Not able to change WPF Toolkit Area Series background

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}">

Resources