Develop Reference

WPF - How to point a setter at a child object?

I have the following xaml :
<Canvas Name="MainCanvas" Style="{StaticResource MainCanvasStyle}">
<ListView Name="MainListView" Style="{StaticResource MainListViewStyle}" ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="dnd">
<Setter TargetName="CanvasItem" Property="Canvas.Background" Value="Orange"/>
</DataTrigger>
</DataTemplate.Triggers>
<Canvas Name="CanvasItem" Height="30" Width="222" Margin="10,5,10,5">
<Canvas.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="{Binding Background, ElementName=CanvasItem}"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Text="{Binding Number}" TextAlignment="Justify" FontSize="18" Width="150" Canvas.Top="2" Canvas.Left="10" FontWeight="Thin"/>
<TextBlock Text="{Binding Status}" TextAlignment="Right" FontSize="18" Width="50" Canvas.Top="2" Canvas.Right="5" FontWeight="DemiBold"/>
</Canvas>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Canvas>
What I'm trying to achieve is to have the second color of LinearGradientBrush in CanvasItems change depending on the current value of Items.Status.
I'd like to acomplish that by targeting the Colors inside LinearGradientBrush in CanvasItem in my setter. How could that be done?
If there are better ways of doing this then I'm open to suggestions.
Another idea I had was to handle in my ViewModel, but I'm not sure if binding them to this ListView would be possible, as my ItemsSource is already set to Items, and I don't want to modify the class that holds those.
/// While the question remains unanswered, I managed to get this to work like described by changing the Setter part to :
<Setter TargetName="CanvasItem" Property="Canvas.Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
I also deleted the part with Canvas.Background in CanvasItem.
This requires me to copy and paste that snippet into every single setter which isn't as comfortable as referencing the exact color in the setter (the one in second GradientStop). There are about ten different color setters in my code so you can imagine how clumsy that looks like.

Hmm...you can't bind the Color of a GradientStop to the same LinearGradientBrush that the GradientStop belongs to if that's what you are trying to do.
You could bind to another property though. You could either use the Tag property or define your own attached Brush property:
<DataTemplate>
<Canvas Name="CanvasItem" Height="30" Width="222" Margin="10,5,10,5">
<!-- default value -->
<Canvas.Tag>
<SolidColorBrush>Green</SolidColorBrush>
</Canvas.Tag>
<Canvas.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="{Binding Tag.Color, ElementName=CanvasItem}"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Text="Number" TextAlignment="Justify" FontSize="18" Width="150" Canvas.Top="2" Canvas.Left="10" FontWeight="Thin"/>
<TextBlock Text="Status" TextAlignment="Right" FontSize="18" Width="50" Canvas.Top="2" Canvas.Right="5" FontWeight="DemiBold"/>
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="dnd">
<Setter TargetName="CanvasItem" Property="Tag">
<Setter.Value>
<SolidColorBrush>Orange</SolidColorBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

I don't follow what your intention is here so I don't know whether this is a good idea or not.
But you seem to want to do it so...
You can name a colour in a gradientstop:
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1">
<GradientStop.Color x:Name="MyColour">Red</GradientStop.Color>
</GradientStop>
</LinearGradientBrush>
Maybe that lineargradient could be a resource or use a dynamicresource colour and you change that out using a trigger if this is used in numerous placed.
Path syntax is really fiddly to do manually and some prefer to use blend for that sort of thing. Far less headaches. As I said, I don't really follow what you want to do here so I don't know what should be set by what from where.
Here's an example of what one looks like though:
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
Which is referencing the rotatetransform in this:
<ContentControl.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentControl.RenderTransform>

Toolkit chart rotate labels X-axis

First of all thank you for reading this.
I have the following problem:
I want the labels of my X-axis te be turned 90 degrees. So that the text is facing vertical instead of horizontal. My X-axis is generated automatic, but it doesn't have to be.
So that the content of the label is vertical instead of horizontal. I've tried multiple options to achieve this but none of them worked for me yet. So I really hope anybody has a clue on how to get this working. With the options I tried there was just another axis that showed up with numbers only. While the thing what I want is the labels to be turned so that all of the text fits on the axis without overlapping eachother.
The image below is the way it is right now:
And here is an example of how i would like it to be (this is made in excel):
I have looked around at more sites but i cant find one that is working for me.
Both in xaml or in the code behind are fine for me.
This is the code i am using now:
<toolkit:Chart Margin="8,72,0,8" Title="Aantal meldingen per afdeling" x:Name="chartMeldingenPerAfdeling">
<toolkit:Chart.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF476D88" Offset="1"/>
</LinearGradientBrush>
</toolkit:Chart.Background>
<toolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen"
IndependentValuePath="Afdeling" Margin="0,0,0,1"
Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center"
HorizontalContentAlignment="Center" FontSize="8"/>
<toolkit:LineSeries ItemsSource="{Binding}" DependentValueBinding="{Binding Percentage}" DependentRangeAxis="{Binding ElementName=PercentageAxis}"
IndependentValueBinding="{Binding Afdeling}" IndependentAxis="{Binding ElementName=lin}" Title="Pareto"/>
<toolkit:Chart.Axes>
<toolkit:LinearAxis Orientation="Y" Location="Left" Title="Aantal" x:Name="AantalAxis"/>
<toolkit:LinearAxis Orientation="Y" Location="Right" Title="Percentage" x:Name="PercentageAxis" Minimum="0" Maximum="100"/>
</toolkit:Chart.Axes>
</toolkit:Chart>
Thank you in advance.

please check this code:
<toolkit:Chart Title="{Binding ChartTitle}" x:Name="myChart" Style="{StaticResource myChartStyle}" BorderBrush="{x:Null}" Background="Black" Foreground="White">
<toolkit:ColumnSeries ItemsSource="{Binding LegendList}"
DependentValueBinding="{Binding FeatureQuantity}"
IndependentValueBinding="{Binding LegendName}" DataPointStyle="{Binding Source={StaticResource ColorByGradeColumn}}" >
</toolkit:ColumnSeries>
<toolkit:Chart.Axes>
<toolkit:CategoryAxis Orientation="X"
Location="Bottom"
Foreground="White">
<toolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="toolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:AxisLabel">
<TextBlock
Text="{TemplateBinding FormattedContent}"
TextAlignment="Right"
TextWrapping="Wrap"
Width="60"
Margin="-20,15,0,0"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.AxisLabelStyle>
</toolkit:CategoryAxis>
</toolkit:Chart.Axes>
</toolkit:Chart>
and result is:
http://upload7.ir/imgs/2014-10/42094080161295718077.png

You can try this for your toolkit:ColumnSeries XAML element:
<chartingToolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen" IndependentValuePath="Afdeling" Margin="0,0,0,1" Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="8">
<chartingToolkit:ColumnSeries.IndependentAxis>
<chartingToolkit:CategoryAxis Orientation="X">
<chartingToolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="chartingToolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:AxisLabel">
<TextBlock Text="{TemplateBinding FormattedContent}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:CategoryAxis.AxisLabelStyle>
</chartingToolkit:CategoryAxis>
</chartingToolkit:ColumnSeries.IndependentAxis>
</chartingToolkit:ColumnSeries>

Button font properties ignored when customizing button content

I got the following setup:
<Button x:Name="DeleteFilter" Margin="5" Grid.Column="1" Padding="2">
<StackPanel Orientation="Horizontal">
<Rectangle Height="9" Width="9" Stretch="Fill" Margin="5 3">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_delete}"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="{Resx DeleteFilter}"/>
</StackPanel>
</Button>
However, when launching my application I get the following result which is not what I want. All font properties seem to be ignored when I set the Content property of my button manually.
Live example:
I'd like to have the same fontstyle and fontsize as the right button. I tried to specify the style manually by using StaticResource and DynamicResource as follows:
<Button Style="{StaticResource MetroButton}"....
but nothing changed.
I guess that I need to implement a style which overrides the existing one and transfers the formatting to the TextBlock element but I have no clue how to do that.
The working "LOAD FILTERS" button in the right:
<Button x:Name="LoadFilter" Content="{Resx LoadFilters}" Margin="5" Grid.Column="2"/>
MahApps.Metro's standard button (MetroButton) is included in this file.
The style I applied to my icon button:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="MetroIconButton" BasedOn="{StaticResource MetroButton}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal">
<Rectangle Height="9" Width="9" Margin="5 3" Stretch="Fill">
<Rectangle.Fill>
<VisualBrush Visual="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

In your setup the StackPanel is used as a content which is not so ideal, you may create a style containing the template and the required property setters for font so it remain consistent for the desired buttons across the application.
So if I try to create a button style for you that would be
<Style x:Key="MetroButton" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="13"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal">
<Rectangle Height="9" Width="9" Margin="5 3" Stretch="Fill">
<Rectangle.Fill>
<VisualBrush Visual="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then I would use this style on button as
<Button Content="Delete" Style="{StaticResource MetroButton}" Tag="{StaticResource appbar_delete}"/>
Update
leveraging the ContentTemplate to achieve the same while utilizing the existing template.
<Style x:Key="MetroIconButton" BasedOn="{StaticResource MetroButton}" TargetType="{x:Type Button}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<Rectangle Height="9" Width="9" Margin="5 3" Stretch="Fill">
<Rectangle.Fill>
<VisualBrush Visual="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}"/>
</Rectangle.Fill>
</Rectangle>
<ContentControl Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
usage remain quite same except the style MetroIconButton
<Button Content="Delete" Style="{StaticResource MetroIconButton}" Tag="{StaticResource appbar_delete}"/>
I am using Tag property to hold the icon so it is plug and play for you, but better is to use Attached properties for the same. l:ExtraProperties.Icon={StaticResource appbar_delete}", I can provide a sample if you need that too.
Actually in previous style we override the Template defined in the MetroButton style so it failed. After looking at the original implementation of MetroButton style I come up with the ContentTemplate way to actieve the same. So instead of setting Template we will set the content template which will be picked up by MetroButton style and applied to the content.
Using Attached Properties
declare a class inheriting DependencyObject or any of its derived class along with the desired property as mentioned below
class ExtraProperties: DependencyObject
{
public static Visual GetIcon(DependencyObject obj)
{
return (Visual)obj.GetValue(IconProperty);
}
public static void SetIcon(DependencyObject obj, Visual value)
{
obj.SetValue(IconProperty, value);
}
// Using a DependencyProperty as the backing store for Icon. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconProperty = DependencyProperty.RegisterAttached("Icon", typeof(Visual), typeof(ExtraProperties), new PropertyMetadata(null));
}
add namespace to your xaml
<Window x:Class="Example.MainWindow"
...
xmlns:l="clr-namespace:Example">
then change the style as
<VisualBrush Visual="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=(l:ExtraProperties.Icon)}"/>
and usage as
<Button Content="Delete" Style="{StaticResource MetroIconButton}" l:ExtraProperties.Icon="{StaticResource appbar_delete}"/>
using Attached properties is more WPF approach, instead of hacking other properties which may not be guaranteed to behave as expected.

Make Control Invisible on start up (no values) / Access control inside DataTemplate

Currently i have a LinearGradientBrush displaying as a bar chart. The problem is on start up of my program (no values from databinding yet) i am getting white bars all across my screen, since the GradientBrush has no values yet and displays this as default.
How exactly do i make sure nothing shows until it actually get its databound values.
How to make this invisible until it get values?
Code of the DataTemplate and the itemsControl where its being used:
<ItemsControl x:Name="icGrafiek"
Margin="0,0,0,0"
ItemsSource="{Binding Source={StaticResource Grafiek}}"
ItemTemplate="{DynamicResource GrafiekItemTemplate}"
RenderTransformOrigin="1,0.5" Grid.RowSpan="6" Grid.Column="1"
<DataTemplate x:Key="GrafiekItemTemplate">
<Grid>
<Border Height="30" Margin="15" Grid.RowSpan="6">
<Border.Background>
<LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0">
<GradientStopCollection>
<GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" />
<GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}"/>
<GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent" />
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</DataTemplate>

One way to hide the bars until there's data bound is to use Triggers to set the Visibility depending on some value.
In your DataTemplate:
<DataTemplate x:Key="GrafiekItemTemplate">
<Grid x:Name="grid">
...
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Value}" Value="{x:Null}">
<Setter TargetName="grid" Property="Visibility" Value="Collapsed" />
</DataTrigger>
</DataTemplate.Triggers>
You may have to use a different value than "Value" for the binding path in the DataTrigger, but this should get you started.

Styles, datatemplates and triggers

I'm pretty new to WPF and needed a little help. I like to use custom UserControls as Templates instead of defining them in the Style or as ControlTemplates mainly because I can see the outcome as I'm writing the code. This approach was working great when I started but I'm not sure how to check for triggers on my control and change stuff in the UserControl template. Hopefully someone understands what I'm trying to say here. Anyways here's some code. I want to know if an item from ListView[MenuTray] is selected inside the DataTemplate of the ListViewItem control...
MainWindow.xaml
<Window x:Class="Cellestus.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1000" Height="650" Loaded="Window_Loaded">
<Window.Resources>
<ResourceDictionary Source="/Resources/GlobalResources.xaml" />
</Window.Resources>
<Viewbox x:Name="WindowView" Stretch="Fill">
<Canvas x:Name="WindowCanvas" Width="1000" Height="650" Background="{StaticResource MainWindow_Bg}">
<!-- other stuf... -->
<ListView x:Name="MenuTray" Width="1000" Height="60" Canvas.Bottom="0" Style="{StaticResource MenuTray_Style}" />
</Canvas>
</Viewbox>
</Window>
MainWindow.xaml.cs, Method:Window_Loded
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// MenuTrayItems.List: ObservableCollection<MenuTrayItem>
// MenuTrayItem: Class with a couple of string variables, Title, image, page and etc..
MenuTray.ItemsSource = MenuTrayItems.List;
}
/Resources/GlobalResources.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:class="clr-namespace:Cellestus.Classes"
xmlns:view="clr-namespace:Cellestus.Views">
<!-- Brushes -->
<ImageBrush x:Key="MainWindow_Bg" ImageSource="/Images/Backgrounds/MainWindow.png" Stretch="Fill" />
<LinearGradientBrush x:Key="Gradient_Black" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#2c2c2c" Offset="0" />
<GradientStop Color="#151515" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Gradient_LightGray" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#6B6B6B" Offset="1" />
<GradientStop Color="#D6D7D8" Offset="0" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Gradient_Gray" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#515151" Offset="0" />
<GradientStop Color="#282828" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Gradient_Green" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#77ba53" Offset="0" />
<GradientStop Color="#5a9c37" Offset="1" />
</LinearGradientBrush>
<!-- Templates -->
<ItemsPanelTemplate x:Key="HorizontalListView">
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
<DataTemplate x:Key="MenuTrayItem_Template" DataType="{x:Type class:MenuTrayItem}">
<view:MenuTrayItemView />
</DataTemplate>
<!-- Styles -->
<Style x:Key="MenuTray_Style" TargetType="{x:Type ListView}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{StaticResource Gradient_Black}" />
<Setter Property="ItemsPanel" Value="{StaticResource HorizontalListView}" />
<Setter Property="ItemTemplate" Value="{StaticResource MenuTrayItem_Template}" />
</Style>
</ResourceDictionary>
/Views/MenuTrayItemView.xaml
<UserControl x:Class="Cellestus.Views.MenuTrayItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary Source="/Resources/GlobalResources.xaml" />
</UserControl.Resources>
<Border x:Name="ItemContainer" Width="150" Height="60" CornerRadius="10" Background="{StaticResource Gradient_Gray}" MouseEnter="ItemContainer_MouseEnter" MouseLeave="ItemContainer_MouseLeave">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="0,3,0,0" Width="60" Height="30" Source="{Binding Image, FallbackValue='/Images/Icons/MenuTray/default.png'}" />
<TextBlock Margin="3,0,0,0" Text="{Binding Title, FallbackValue='title'}" FontSize="10" Foreground="White" />
</StackPanel>
</Border>
</UserControl>
/Views/MenuTrayItemView.xaml.cs
private void ItemContainer_MouseEnter(object sender, RoutedEventArgs e)
{
ItemContainer.Background = FindResource("Gradient_LightGray") as Brush;
}
private void ItemContainer_MouseLeave(object sender, RoutedEventArgs e)
{
ItemContainer.Background = FindResource("Gradient_Gray") as Brush;
}
Here's an image for the visual people:
Well if you made it this far. What I want to know is how to catch the IsSelected value on the ListViewItem control in my DataTemplate / UserControl(MenuTrayView.xaml) and change the background to the static resource "Gradient_Green". I know I can just handle the MouseDown event in my view, but I don't want to do that. I want to know if the item is actually selected.

You need to create a style to your user control, and do something like
<Style TargetType="{x:Type local:MenuTrayItemView}">
<Trigger Property="IsSelected" Value="true">
<Setter Property="background" Value="Static Resource Gradient_Green"/>
</Trigger>
</Style.Triggers>
</Style>
if you ot problems go here WPF Trigger for IsSelected in a DataTemplate for ListBox items