Develop Reference

How to get ControlTemplate not to override DataTemplate?

Similar to gmail's Select button, I wanted to create a ComboBox for the ListView which allows the user to quickly select entries of their choosing (ex. All, None, Read, Unread). However, the selected value would display a tri-state CheckBox equivalent to All, Some, or None of the entries being selected. I succeeded in doing so. Below is the xaml for an example Window utilizing this feature(*):
<Window x:Class="WPFTest.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfTest="clr-namespace:WPFTest.ViewModels"
xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Mvvm;assembly=Microsoft.Practices.Prism.Mvvm.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPFTest.Models"
mc:Ignorable="d" Title="WPF Test" Height="221.256" Width="605"
d:DataContext="{d:DesignInstance wpfTest:MainWindowViewModel, IsDesignTimeCreatable=True}"
prism:ViewModelLocator.AutoWireViewModel="True" WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/WPFTest;Component/Resources/Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ListView
ItemsSource="{Binding Entries}"
SelectedValue="{Binding SelectedEntry}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
SelectionMode="Single"
Margin="10">
<ListView.View>
<GridView>
<GridViewColumn Width="Auto">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox
IsChecked="{Binding Selected}"
Command="{Binding DataContext.RowSelectedCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
HorizontalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
<GridViewColumnHeader>
<ComboBox
ItemsSource="{Binding Options.Items}"
SelectedValue="{Binding Options.SelectedItem}"
ItemTemplateSelector="{DynamicResource itemTemplateSelector}"
HorizontalAlignment="Stretch"
Margin="0,0,0,0"
VerticalAlignment="Stretch"
Width="44"
Height="34"
FontSize="20"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left">
<ComboBox.Resources>
<DataTemplate x:Key="selectedTemplate">
<TextBlock
x:Name="displayText"
Text="{Binding DataContext.Options.SelectedDisplay, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
FontSize="20"
Height="22"/>
</DataTemplate>
<DataTemplate x:Key="dropDownTemplate">
<TextBlock Text="{Binding}" FontSize="12"/>
</DataTemplate>
<local:ComboBoxItemTemplateSelector
x:Key="itemTemplateSelector"
SelectedTemplate="{StaticResource selectedTemplate}"
DropDownTemplate="{StaticResource dropDownTemplate}"/>
</ComboBox.Resources>
</ComboBox>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn
Width="Auto"
DisplayMemberBinding="{Binding Type, Mode=OneWay}"
Header="Type"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>
Recently I was asked to make a style for every ComboBox on our screens - changing their backgrounds. Because I'm on Windows8, setting the Background alone isn't enough. Using this tutorial I was able to create the ControlTemplate to get the correct behavior, with one minor error fix:
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="True"/>
<!-- Comment out the following, it throws an error. -->
<!--<Condition>
<Condition.Value>
<sys:Boolean>False</sys:Boolean>
</Condition.Value>
</Condition>-->
</MultiTrigger.Conditions>
And usage:
<Style
TargetType="{x:Type ComboBox}">
...
<Setter
Property="Template"
Value="{StaticResource ComboBoxStyle1}" />
</Style>
This successfully styles the ComboBox Background. However, revisiting the former screen, I noticed that this breaks my gmail-like display.
How can I get this ControlTemplate and the dynamic DataTemplate to cooperate?
(*) ViewModels and Models can be provided if necessary for a solution. Or see full working example.

I'm not sure why you doing so complicated ComboBox - you defined ItemTemplateSelector twice...
Ok - here is my 2 cents: ComboBox is lookless control. It based on ControlTemplate target type = ComboBox. Inside ComboBox ControlTemplate you will find ContentPresenter. Whatever coming into Content of ContentPresenter could be styled with DataTemplate. Generally - when you define DataTemplate it wrap only ContentPresenter or ItemsPresenter for range based controls - not the whole ControlTemplate obviously.
So if you want to change 'Selected' template for ComboBox is ok but all other data should be defined via DataTemplate for this type {x:Type local:SomeType} that will be used by ComboBox.
Also - consider using #galakt suggestion: use Style with TargetType - it easy to read, refactor, find, understand...

Color the Background
As per the OP, following this tutorial, you generate the ControlTemplate.
To do this, you can right-click on the ComboBox element in design mode
in Visual Studio 2012 or 2013 and select the “Edit template” option
and then the “Edit a copy…” option.
Again note the bug fix from the OP. Changing the background can then be done by:
<Border
x:Name="templateRoot"
BorderBrush="#FFACACAC"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
Background="{StaticResource MyComboBackgroundBrush}"> <!-- option 1 -->
<!-- <Border.Background> -->
<!-- option 2 -->
<!-- <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF0F0F0" Offset="0"/>
<GradientStop Color="#FFE5E5E5" Offset="1"/>
</LinearGradientBrush>-->
<!-- option 3 -->
<!-- <SolidColorBrush Color="Yellow"/> -->
<!-- </Border.Background>
<Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="True" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
<Path x:Name="Arrow" Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z" Fill="#FF606060" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>
</Border> -->
</Border>
Interact with the DataTemplate
In the resource file, following the above instructions, you declared:
<ControlTemplate x:Key="ComboBoxControlTemplateBasic" TargetType="{x:Type ComboBox}">
...
<ContentPresenter
x:Name="contentPresenter"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
... />
...
</ControlTemplate>
Create a copy of it with the following change, where selectedTemplate is the key of the DataTemplate you want to cooperate with the ControlTemplate:
<ControlTemplate x:Key="ComboBoxControlTemplateHeader" TargetType="{x:Type ComboBox}">
...
<ContentPresenter
x:Name="contentPresenter"
ContentTemplate="{DynamicResource selectedTemplate}"
... />
...
</ControlTemplate>
Declare the appropriate styles:
<Style
TargetType="{x:Type ComboBox}">
<Setter Property="Template"
Value="{StaticResource ComboBoxControlTemplateBasic}" />
<!-- other generic style setters -->
</Style>
<Style
x:Key="ComboBoxHeader"
x:Name="ComboBoxHeader"
TargetType="{x:Type ComboBox}"
BasedOn="{StaticResource {x:Type ComboBox}}">
<Setter Property="Template"
Value="{StaticResource ComboBoxControlTemplateHeader}" />
<Setter Property="ItemTemplateSelector"
Value="{DynamicResource itemTemplateSelector}"/>
<!-- other specific style setters -->
</Style>
Results
Every ComboBox shares the same look.
The dynamic use of DataTemplate selectedTemplate allows each ListView header gmail-like ComboBox to have the same look with unique binding values.
Take for example the OP ComboBox header plus the following ComboBox with the same item source:
<ComboBox
HorizontalAlignment="Left"
Margin="10,152,0,0"
VerticalAlignment="Top"
Width="120"
ItemsSource="{Binding Options.Items}"
SelectedValue="{Binding Options.SelectedItem}"/>
<GridViewColumnHeader>
<ComboBox
ItemsSource="{Binding Options.Items}"
SelectedValue="{Binding Options.SelectedItem}"
Style="{StaticResource ComboBoxHeader}">
<ComboBox.Resources>
<DataTemplate x:Key="selectedTemplate">
<TextBlock
x:Name="displayText"
Text="{Binding DataContext.Options.SelectedDisplay, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
FontSize="20"
Height="22"/>
</DataTemplate>
<DataTemplate x:Key="dropDownTemplate">
<TextBlock Text="{Binding}" FontSize="12"/>
</DataTemplate>
<local:ComboBoxItemTemplateSelector
x:Key="itemTemplateSelector"
SelectedTemplate="{StaticResource selectedTemplate}"
DropDownTemplate="{StaticResource dropDownTemplate}"/>
</ComboBox.Resources>
</ComboBox>
</GridViewColumnHeader>

How can I set the background of a StackPanel to an ImageBrush defined in a style resource?

I can apply a background image to a StackPanel with this XAML code:
<StackPanel>
<StackPanel.Background>
<ImageBrush ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
</StackPanel.Background>
...
</StackPanel>
But that's kind of a lot to type when applied to multiple StackPanels. So I'd rather define a Style (aka Static Resource?) that I can quickly apply to the individual StackPanels.
So I started writing this:
<Window.Resources>
<ImageBrush x:Key="SpBg" ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
<Style x:Key="StackPanelBg" TargetType="StackPanel">
<!-- begin invalid xaml -->
<Setter Property="Background" Value="SpBg" />
<!-- end invalid xaml -->
</Style>
</Window.Resources>
So that I'd be able to do this:
<StackPanel Style="{StaticResource StackPanelBg}">
...
</StackPanel>
Except that doesn't work; the Setter line isn't correct. How can I make this work?

Like that:
<Window x:Class="WpfApplication12.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ImageBrush x:Key="SpBg" ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
<Style x:Key="StackPanelBg" TargetType="StackPanel">
<Setter Property="Background" Value="{StaticResource SpBg}" />
</Style>
</Window.Resources>
<StackPanel Style="{StaticResource StackPanelBg}">
</StackPanel>
</Window>

Making XAML layout dynamic

I am new to using XAML and C# in general so this is probably an easy question but I have my XAML as so
<Page
x:Class="Tournament_Director_Windows.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Tournament_Director_Windows"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="LightGray">
<Button Style="{StaticResource AddAppBarButtonStyle}" Foreground="#FF094AB2" Click="onAddNewBowlerClick" HorizontalAlignment="Right" RenderTransformOrigin="0.4,0.508" Margin="0,10,115,679"/>
<ListView Height="648" Width="377" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="itemListView" ItemClick="itemListView_ItemClick" ItemsSource="{Binding}" IsItemClickEnabled="True" Margin="225,110,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock TextWrapping="Wrap" Text="Bowlers" Height="54" Width="177" FontSize="50" Foreground="#FF094AB2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="225,10,964,704"/>
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="onSyncClick" Background="#FFF8FCFD" HorizontalAlignment="Right" Foreground="#FF094AB2" BorderBrush="#FFFBF9F9" Margin="0,10,10,679"/>
<ListView HorizontalAlignment="Left" Height="Auto" Width="220" Background="Silver" SelectionChanged="MenuListView_SelectionChanged">
<!--<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="#FF094AB2" />
<Setter Property="FontSize" Value="30" />
<Setter Property="Height" Value="75"/>
</Style>
</ListView.Resources>-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="#FF094AB2" />
<Setter Property="FontSize" Value="25" />
<Setter Property="Height" Value="75"/>
<Setter Property="Padding" Value="10"/>
</Style>
</ListView.ItemContainerStyle>
<x:String>Bowlers</x:String>
<x:String>Brackets</x:String>
<x:String>Scores</x:String>
</ListView>
<ScrollViewer Height="Auto" HorizontalAlignment="Stretch" Width="754" Margin="602,110,0,10">
</ScrollViewer>
</Grid>
my question is about the ScrollViewer at the end, I have it as a set width but what I want to do is have the width fill the rest of the screen from its set position next to my ListView so no matter what screen size you have it looks the same and there is not a big space if you have a bigger screen or it gets cut off because the screen is smaller.
How can I do that?

Try to use <ColumnDefinitions> with width property "Auto" or "*" and <RowDefinitions> with height property "Auto" or "*" for grid. In this case you can manage what part of your content has permanent size and what part will resize with a window.

Adding events on WPF LineSeries DataPoint

I am using WPF Toolkit to draw a line chart (a feature on our application). Given a Collection, I am able to plot the graph, however, when the user double clicks on the DataPoint on the graph, I am finding it difficult to get the X and Y data value (not the Co-Ordinate value in the line graph).
I am able to set property using DataPointStyle, but unable to add event to it.
If I use MouseDoubleClick="lineChart_ShowResults_DoubleClick" property on the LineSeries node, then it triggers an event when user clicks on any point. But, I need to trigger the event only if the user clicks on the DataPoint. The following is the XAML that I tried to implement. Please help.
<Window x:Class="TeamXXX.YYYUI.GraphicalDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GraphicalDisplay" Height="400" Width="600" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="439" d:DesignWidth="654" SizeToContent="WidthAndHeight">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinHeight="360" MinWidth="575" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<chartingToolkit:Chart Name="lineChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Height" Value="0" />
<Setter Property="Width" Value="0" />
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:LineSeries DependentValuePath="Value" Name="lineSeries" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" MouseDoubleClick="lineChart_ShowResults_DoubleClick">
<!--<chartingToolkit:LineSeries.DataPointStyle>
<Style x:Uid="CommonLineSeriesDataPoint" TargetType="chartingToolkit:LineDataPoint">
<Setter Property="" Property="lineChart_ShowResults_DoubleClick"/>
</Style>
</chartingToolkit:LineSeries.DataPointStyle>-->
<chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Orientation="Y" Title="Cost in minutes" FontSize="16" />
</chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LineSeries.IndependentAxis>
<chartingToolkit:LinearAxis Orientation="X" Title="Fold" FontSize="16" />
</chartingToolkit:LineSeries.IndependentAxis>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
</Grid>
</ScrollViewer>
</Window>

As you said, The event triggers upon a click on any of the points because the event is assigned to the LineSeries. On this line (from your post)
<chartingToolkit:LineSeries DependentValuePath="Value" Name="lineSeries" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" MouseDoubleClick="lineChart_ShowResults_DoubleClick">
You were in the right path by going into LineSeries.DataPointStyle but I believe that you should define an event setter instead of a setter.
Like this:
<chartingToolkit:LineSeries.DataPointStyle>
<Style>
<EventSetter>
<EventSetter Event="Control.MouseDoubleClick" Handler="lineChart_ShowResults_DoubleClick"/>
</EventSetter>
</Style> </chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries.DataPointStyle>
And obviously remove the event handling on the LineSeries.
I did not try it, let me know if it works

What could be preventing styles from applying to a Silverlight control at runtime?

I wrote a simple Silverlight application. My styles are shown correctly at design time, but when I try to run the application, any styles in resource dictionary file which are merged in app.xaml file are not applied to any control at runtime.
Actually, only UserControl styles don't seem to apply. But the rest are working (like the Button on the page). What could be causing this problem and how can I fix it?
My code is something like this:
Styles.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="UserControl">
<Setter Property="FlowDirection" Value="RightToLeft" />
<Setter Property="FontFamily" Value="Tahoma" />
<Setter Property="Background" Value="Aqua" />
</Style>
<Style TargetType="Button" >
<Setter Property="Background" Value="Aqua" />
</Style>
</ResourceDictionary>
App.xaml:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Silverlight.Test._01.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
MainPage.xaml:
<UserControl x:Class="Silverlight.Test._01.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="This is a test" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="button1" VerticalAlignment="Top" Width="220" />
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="12,6,0,0" Name="label1" VerticalAlignment="Top" Width="351" Content="Test label" />
</Grid>
</UserControl>

At least one reason this doesn't work is because you never actually create an instance of UserControl. You actually create an instance of Silverlight.Test._01.MainPage.
In addition unlike Button the UserControl does not set the DefaultStyleKey property on the control to UserControl in fact attempting to set a value into DefaultStyleKey in code behind will result in an exception.
There is no general workaround for this. The closest you can get is to change the default style to a standard keyed resource:-
<Style x:Key="UserControlDefaultStyle" TargetType="UserControl">
<Setter Property="FlowDirection" Value="RightToLeft" />
<Setter Property="FontFamily" Value="Tahoma" />
<Setter Property="Background" Value="Aqua" />
</Style>
Now change your usercontrol xaml to look like:-
<UserControl x:Class="Silverlight.Test._01.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Style="{StaticResource UserControlDefaultStyle}"
>
<Grid x:Name="LayoutRoot" Background="{Binding Parent.Background, ElementName=LayoutRoot}">
<Button Content="This is a test" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="button1" VerticalAlignment="Top" Width="220" />
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="12,6,0,0" Name="label1" VerticalAlignment="Top" Width="351" Content="Test label" />
</Grid>
</UserControl>
Note that this isn't a general solution since you need to add the additional Style attribute to each UserControl you create.
Also note the binding on LayoutRoot Background property. The UserControl.Background property actually does nothing, you pass this value on to the child control for it have any effect.