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>

Windows 8.1 scale transform incorrect

I am designing a Windows 8.1 app in C#/XAML. I am trying to replicate the tilt effect found on Windows Phone. I have tried this with both a ScaleTransform and a PointerDownThemeAnimation.
However, the scale effect seems broken in the Y direction. It pushes the UI element down vertically on the page, instead of just scaling it smaller. I have used scale in Windows 8 apps before 8.1 and not had this issue.
Even stranger is in design view it works fine. I have tried setting RenderTransformOrigin to "0.5, 0.5". Here is an example of what happens when I set the text block's scale to 0.5:
What do you think the issue is and how can it be resolved? Thanks
Edit: Here is most of the XAML:
<Grid Height="{Binding PalettePanelHeight}">
<TextBlock Text="Palettes" FontSize="70" Margin="24,22,0,0"/>
<StackPanel Orientation="Horizontal" Name="typePanel" HorizontalAlignment="Right" Margin="0,52,24,0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="0,0,24,0"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="28"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="Newest" Opacity="1" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="newest_Tapped" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="Most popular" Opacity="0.45" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="popular_Tapped" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="Highest rated" Opacity="0.45" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="rating_Tapped" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
The 'Newest' text block with scale 0.5 is shown in the example image. 'PalettePanelHeight' is just Window.Current.Bounds.Height in code.

If you want to keep the ScaleTransform, use VerticalAlignment to ensure that the text will be on top
<TextBlock VerticalAlignment="Top" Text="Newest" Opacity="1" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
</TextBlock.RenderTransform>
</TextBlock>
If you want to keep it like other titles, remove the scaleTrandform and make it:-
<TextBlock VerticalAlignment="Top" Text="Newest" Opacity="1" RenderTransformOrigin="0.5,0.5">
</TextBlock>

Changing control properties using BasedOn

I have a UserControl with some buttons. I need to change the background colour of the buttons but retain all other properties and colours such as mouseover events
I've used the following code which I hoped would define UniqueButton1 based on {StaticResource {x:Type Button}}" but change the background property to define my own colours
<UserControl x:Class="Project.Detail"
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"
d:DesignHeight="30" d:DesignWidth="800" BorderBrush="#FF5380E7" BorderThickness="0,0,0,1" xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<UserControl.Resources>
<Style x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF896CE" Offset="0" />
<GradientStop Color="#FFF788C7" Offset="0.5" />
<GradientStop Color="#FFF570BB" Offset="0.5" />
<GradientStop Color="#FFF353AE" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Height="30" Width="800">
<Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" Name="button2" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
<Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="423,0,0,0" Name="button1" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
</Grid>
</UserControl>
It kind of works, in that I get the background colours the way I need, but UniqueButton1 which I've defined in <UserControl.Resources> is not based on the other default button2 with no style changes applied. Eg, the background, colours, animation speeds etc are all different
Perhaps it's because I'm also applying a theme?
My question is either
1. How do I define a resource that is based on a default button2 with a theme applied?
or
2. How do I get all of the properties of button2 with the theme applied so I can build my own style?
It's been suggested I may need to build my own style, which is fine. But I need to match the behaviour of the default themed button except for the background property - if I can't see how it's made up it seems a bit of a catch22.
EDIT: To clarify things
These two images show 3 buttons, you can see the mousover for button3 is orange and blue for button2. What you can't see is that the animation speed is also different. Essentially I want my button to look like button1 in the rest state and button3 on mouseover whilst retaining the button3 animation speed and other properties. Button2 is what I'm getting using basedon with no further properties changed.
Button3 is produced with no resources and XAML
<Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>
Button2 is produced using
<UserControl.Resources>
<Style x:Key="TEST1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
</Style>
</UserControl.Resources>
<Button Style="{StaticResource TEST1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>
Button1 is produced using
<UserControl.Resources>
<Style x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF896CE" Offset="0" />
<GradientStop Color="#FFF788C7" Offset="0.5" />
<GradientStop Color="#FFF570BB" Offset="0.5" />
<GradientStop Color="#FFF353AE" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
So obviously button 1 and 2 are not based on button3 which is what I want. I want to clone button3 properties and ONLY change the background to pink.

Change your BaseButton from x:Type to a named one and then set it's name on others BasedOn, that should do the trick.

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.

One-sided rounded buttons in Silverlight

I want to make a collection of buttons in silverlight.
They are in a collection that goes from left to right and the buttons are lined up so that they are touching on the left and right sides.
Here is the rub:
The collection has rounded corners but the buttons in between the end buttons in the collection do not have rounded ends. So basically, for the buttons on the far left and right side of the collection, they have to be somewhat special because they have to have one flat vertical side and one rounded side. Is this possible to do in silverlight without resorting to making a special bitmap for the end buttons?
One idea I have is somehow declare a canvas with a bitmap background and then have overlapping ellipse and rectangle
<Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,0" VerticalAlignment="Top" Width="200" Background="Black">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="Black" Width="58" Height="61" Canvas.Left="7" Canvas.Top="16" />
<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="White" Width="65" StrokeThickness="0" Height="59" Canvas.Left="31" Canvas.Top="17" />
</Canvas>

Here is a simple example of the effect you are trying to achieve that utilizes custom ControlTemplate to skin the buttons in three ways:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="10,0,0,10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonCenterStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,0,0,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,10,10,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonCenterStyle}" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>
</Grid>
And this looks like:
There's a lot more you can do here but this shows an approach you can use. Here's a great blog article with more information and examples of this technique:
Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel

I solved the problem by using a visual trick. First of all, my trick required I placed the buttons on an image that would represent the background. The buttons were somewhat transparent so the color of this background came through
The buttons in the middle be simple rectangle canvas classes. While the end buttons had rounded ends.
The middle buttons were in front of the buttons on the end and they overlapped them.
The buttons were transparent and so normally it would not work because you would be able to see the end buttons edges behind the middle buttons. I solved this by putting a rectangle filled with the color of the background image "between" (think in 3D layered depth terms) the end buttons and the rectangle shapped buttons in front of it. The colored rectangles only were positioned in front of the end buttons that were behind the rectangle buttons in front of them.
This was kind of a hack but it worked. When I have time, I will try the solutions suggested here.

Yeah, even simpler, based on Rick'S, as you just want to use the styles to address the rounded corners of your button template border:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<!-- Default Template -->
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="DarkGray" CornerRadius="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
<!-- Custom Styles for edges -->
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="10,0,0,10" TargetName="Border"/>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="0,10,10,0" TargetName="Border"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>