I am trying to set a trigger in my DataTemplate so that when the source object has a property HasUnreadMessages set to true, then the header text goes red. But from inside the triggers in datatemplate I have no idea of how to reference the TextBlock of the header.
Full Code :
<Window x:Class="IRC.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc="clr-namespace:IRC"
Title="" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type loc:Tab}">
<DockPanel>
<ListBox x:Name="lstUsers" ItemsSource="{Binding Users}" Visibility="Collapsed" DockPanel.Dock="Right" />
<ListBox x:Name="lstMessage" ItemsSource="{Binding Messages}" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Type}" Value="Channel">
<Setter TargetName="lstUsers" Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding HasUnreadMessages}" Value="True">
<Setter TargetName="tabHeader" Property="Foreground" Value="Red" /> // -- ERROR
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Actions">
<MenuItem Header="_Connect" InputGestureText="Alt+C" Click="Connect" />
</MenuItem>
</Menu>
<TextBox Name="txtInput" Height="22" VerticalContentAlignment="Center" SpellCheck.IsEnabled="True" DockPanel.Dock="Bottom" />
<TabControl Name="pnlTabs" ItemsSource="{Binding}" ContentTemplate="{Binding}" DockPanel.Dock="Top">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="tabHeader" Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DockPanel>
</Window>
Error :
The name "tabHeader" is not recognized.
The member "Foreground" is not recognized or is not accessible.
Tab :
public class Tab
{
public string Name { get; set; }
public string Type { get; set; }
public ObservableCollection<string> Users { get; set; }
public ObservableCollection<string> Messages { get; set; }
public bool HasUnreadMessages { get; set; }
}
You're trying to change a property of an object which is not known at that point.
Instead of putting the DataTrigger on the Tab, move the DataTrigger to the TabItem - since it's the TabItem that you're trying to change...
In your case, add a TabItem style:
<Window.Resources>
<DataTemplate DataType="{x:Type TabItem}" x:Key="ItemTemplateStyle">
<TextBlock x:Name="tabHeader" Text="{Binding Name}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding HasUnreadMessages}" Value="True">
<Setter TargetName="tabHeader" Property="Foreground" Value="Red" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
And set this style for the TabItems:
<TabControl Name="pnlTabs" ItemsSource="{Binding}" ContentTemplate="{Binding}" DockPanel.Dock="Top"
ItemTemplate="{StaticResource ItemTemplateStyle}" />
Related
Based on this answer I tried to use the following code to achieve a ComboBox with different templates depending on whether or not the drop down is open.
The ComboBox definition looks like this:
<ComboBox SelectedValuePath="Id"
DisplayMemberPath="Name">
<ComboBox.Resources>
<DataTemplate x:Key="SelectedTemplate">
<TextBlock Text="Abbreviation" />
</DataTemplate>
<DataTemplate x:Key="DropDownTemplate">
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}, Path=ActualWidth, Mode=OneTime}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=DisplayMemberPath}" />
<TextBlock Grid.Column="1"
Text="Abbreviation" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
<infrastructure:ComboBoxItemTemplateSelector x:Key="ComboBoxItemTemplateSelector"
DropDownDataTemplate="{StaticResource DropDownTemplate}"
SelectedDataTemplate="{StaticResource SelectedTemplate}" />
</ComboBox.Resources>
</ComboBox>
and the ComboBoxItemTemplateSelector looks like this:
public class ComboBoxItemTemplateSelector : DataTemplateSelector
{
public DataTemplate DropDownDataTemplate { get; set; }
public DataTemplate SelectedDataTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
return DependencyObjectHelper.GetVisualParent<ComboBoxItem>(container) != null ? this.DropDownDataTemplate : this.SelectedDataTemplate;
}
}
Now the problem is that somehow SelectTemplate is never called, even although I checked all the DynamicResources and StaticResources.
You need to assign the ComboBoxItemTemplateSelector to the ComboBox like this:
<ComboBox ItemTemplateSelector="{DynamicResource ComboBoxItemTemplateSelector}">
and you cannot set the DisplayMemberPath or the SelectTemplate method will never be called.
I have 3 RadioButtons in my app:
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="91,206,0,24">
<TextBlock Text="Title Language:" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" HorizontalAlignment="Left" Margin="0,0,15,0" />
<RadioButton x:Name="Rad_TitleNameRomaji" Content="Romaji" FontSize="20" Margin="0,0,10,0" Checked="TitleSettingsChanged"/>
<RadioButton x:Name="Rad_TitleNameEnglish" Content="English" FontSize="20" Margin="0,0,10,0" Checked="TitleSettingsChanged"/>
<RadioButton x:Name="Rad_TitleNameJapanese" Content="Japanese" FontSize="20" Checked="TitleSettingsChanged" />
</StackPanel>
There is a DataTemplate for my ListViewItems:
<DataTemplate x:Key="ItemTemplate_ListViewItems" >
<Grid Width="213" Height="326">
...
<TextBlock Text="{Binding WhatShouldIPutHere}) />
...
</Grid>
</DataTemplate>
The ListView's ItemsSource is a List<CustClass>.
CustClass:
public class CustClass : INotifyPropertyChanged
{
public string RomajiTitle { get; set; }
public string EnglishTitle { get; set; }
public string JapaneseTitle { get; set; }
...
public event PropertyChangedEventHandler PropertyChanged;
}
Now what i want is when I checked the "English" RadioButton, the Text of the TextBlock inside the DataTemplate will be bind to EnglishTitle. And so for the other two.
How can i approach this?
three DataTriggers should do the trick
<DataTemplate x:Key="ItemTemplate_ListViewItems" >
<Grid Width="213" Height="326">
<TextBlock >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Rad_TitleNameRomaji,Path=IsChecked}" Value="True" >
<Setter Property="Text" Value="{Binding RomajiTitle}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Rad_TitleNameEnglish,Path=IsChecked}" Value="True" >
<Setter Property="Text" Value="{Binding EnglishTitle}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Rad_TitleNameJapanese,Path=IsChecked}" Value="True" >
<Setter Property="Text" Value="{Binding JapaneseTitle}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</DataTemplate>
I have a special requirement which need to implement a combobox which list data in groups and I could do it as below
the XAML file
<Window x:Class="GroupComboBox.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">
<Grid>
<ComboBox x:Name="comboBox" Width="100">
<ComboBox.Resources>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="150" Height="Auto" >
<!-- add scroll bar -->
</WrapPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Width" Value="50" />
</Style>
</ComboBox.Resources>
<ComboBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="2">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" Background="YellowGreen"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ComboBox.GroupStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Item}" Width="40"/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="IsEnabled" Value="{Binding Available}"/>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>
</Window>
The code-behind file
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<CategoryItem<string>> items = new List<CategoryItem<string>>();
for (int i = 0; i < 18; ++i)
{
items.Add(new CategoryItem<string> { Item = string.Format("{0:D2}", i), Available = (i > 9), Category = "Group A" });
}
for (int i = 0; i < 4; ++i)
{
items.Add(new CategoryItem<string> { Item = string.Format("{0:D2}", i), Available = (i > 2), Category = "Group B" });
}
//Need the list to be ordered by the category or you might get repeating categories
ListCollectionView lcv = new ListCollectionView(items.OrderBy(w => w.Category).ToList());
//Create a group description
lcv.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
this.comboBox.ItemsSource = lcv;
}
}
public class CategoryItem<T>
{
public T Item { get; set; }
public bool Available { get; set; }
public string Category { get; set; }
}
Now I want to make the combobox to be a custom control, then it can be reused easily, but I am new for creating custom control and how should I do?
Currently I have created a WPF custom control library and change the base class of the custom control to be 'ComboBox' , but I do not know how to move the styles and templates to the resource dictionary file correctly
I can offer the following variant. Move all the styles and templates in resources:
<!-- Main style for ComboBox -->
<Style x:Key="MyComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="25" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="150" Height="Auto" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Item}" Width="40"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Style for ComboBoxItem -->
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Width" Value="50" />
</Style>
<!-- Style for ItemContainerStyle -->
<Style x:Key="ComboBoxItemContainerStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="IsEnabled" Value="{Binding Available}" />
</Style>
<!-- DataTemplate for HeaderTemplate -->
<DataTemplate x:Key="MyHeaderTemplate">
<Border BorderBrush="Black" BorderThickness="2">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" Background="YellowGreen" />
</Border>
</DataTemplate>
Using of ComboBox with our styles:
<ComboBox x:Name="MyComboBox1" Style="{StaticResource MyComboBox}" IsSynchronizedWithCurrentItem="False" ItemContainerStyle="{StaticResource ComboBoxItemContainerStyle}">
<ComboBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource MyHeaderTemplate}" />
</ComboBox.GroupStyle>
</ComboBox>
<ComboBox x:Name="MyComboBox2" Style="{StaticResource MyComboBox}" IsSynchronizedWithCurrentItem="False" ItemContainerStyle="{StaticResource ComboBoxItemContainerStyle}">
<ComboBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource MyHeaderTemplate}" />
</ComboBox.GroupStyle>
</ComboBox>
And set the data in code:
this.MyComboBox1.ItemsSource = lcv;
this.MyComboBox2.ItemsSource = lcv;
Set styles for you control need to change Type and write your control name:
<Style x:Key="MyControlComboBox" TargetType="{x:Type local:MyControlComboBox}">
</Style>
I'd like to display arbitrary XML in a TreeView, with expanding and collapsing nodes, showing both the element name and the set of attributes and their values. I think I can do this with HierarchicalDataTemplate .
I've seen the hints to use HierarchicalDataTemplate to display arbitrary XML elements, and text nodes, like this:
<Window.Resources>
<HierarchicalDataTemplate x:Key="NodeTemplate">
<TextBlock x:Name="tbName" Text="?" />
<HierarchicalDataTemplate.ItemsSource>
<Binding XPath="child::node()" />
</HierarchicalDataTemplate.ItemsSource>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<XmlDataProvider x:Key="xmlDataProvider">
</XmlDataProvider>
</Window.Resources>
....
<TreeView Name="treeView1"
ItemsSource="{Binding Source={StaticResource xmlDataProvider}, XPath=*}"
ItemTemplate= "{StaticResource NodeTemplate}"/>
Which works great. It displays the element names and text for each element. But my XML uses attributes to carry information. The schema is complex and I don't have a formal definition of it, so for now I am treating it as arbitrary XML.
The simplest document looks like this:
<c4soap name="GetVersionInfo" seq="" result="1">
<versions>
<version name="Director"
version="2.1.0.126418"
buildtype=""
builddate="Jun 1 2011" buildtime="14:52:43" />
<version name="MediaManager"
version="2.1.0.126418"
buildtype=""
builddate="Jun 1 2011"
buildtime="14:36:17" />
</versions>
</c4soap>
Using the above HierarchicalDataTemplate definition, I get this for a display:
Not quite what I want. For each node I want to display both the element name and the set of attributes and their values.
I tried this:
<Window.Resources>
<HierarchicalDataTemplate x:Key="NodeTemplate">
<WrapPanel
Focusable="False">
<TextBlock x:Name="tbName" Text="?" />
<TextBlock x:Name="tbAttrs" Text="?" />
</WrapPanel>
<HierarchicalDataTemplate.ItemsSource>
<Binding XPath="child::node()" />
</HierarchicalDataTemplate.ItemsSource>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/>
<Setter TargetName="tbAttrs" Property="Text" Value="{Binding Path=Attributes}"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<XmlDataProvider x:Key="xmlDataProvider">
</XmlDataProvider>
</Window.Resources>
... which gets me kinda close, but the
Value="{Binding Path=Attributes}" results in a display of "(Collection)" in the TreeView.
How can I simply display all the actual attribute names and values, in addition to the element name?
I added an ItemsControl into the template, like this :
<Window.Resources>
<SolidColorBrush x:Key="xmlValueBrush" Color="Blue" />
<SolidColorBrush x:Key="xmAttributeBrush" Color="Red" />
<SolidColorBrush x:Key="xmlTagBrush" Color="DarkMagenta" />
<SolidColorBrush x:Key="xmlMarkBrush" Color="Blue" />
<DataTemplate x:Key="attributeTemplate">
<StackPanel Orientation="Horizontal"
Margin="3,0,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding Path=Name}"
Foreground="{StaticResource xmAttributeBrush}"/>
<TextBlock Text="=""
Foreground="{StaticResource xmlMarkBrush}"/>
<TextBlock Text="{Binding Path=Value}"
Foreground="{StaticResource xmlValueBrush}"/>
<TextBlock Text="""
Foreground="{StaticResource xmlMarkBrush}"/>
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="nodeTemplate">
<StackPanel Orientation="Horizontal"
Focusable="False">
<TextBlock x:Name="tbName" Text="?" />
<ItemsControl
ItemTemplate="{StaticResource attributeTemplate}"
ItemsSource="{Binding Path=Attributes}"
HorizontalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
<HierarchicalDataTemplate.ItemsSource>
<Binding XPath="child::node()" />
</HierarchicalDataTemplate.ItemsSource>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<XmlDataProvider x:Key="xmlDataProvider">
</XmlDataProvider>
</Window.Resources>
Now it displays element names and the set of attributes and their values, like this:
you also can use a template selector for the different node types and use the XPath node()|#* to loop thru all types of nodes:
<TreeView
x:Name="TreeView"
ItemsSource="{Binding}"
ItemTemplateSelector="{DynamicResource ResourceKey=NodeTemplateSelector}">
<TreeView.Resources>
<HierarchicalDataTemplate x:Key="TextTemplate">
<Grid>
<uixml:TextInputControl DataContext="{Binding}" />
</Grid>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="AttributeTemplate">
<Grid>
<uixml:AttributeInputControl DataContext="{Binding}" />
</Grid>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="NodeTemplate" >
<TextBlock Text="{Binding Path=Name}" />
<HierarchicalDataTemplate.ItemsSource>
<Binding XPath="child::node()|#*" />
</HierarchicalDataTemplate.ItemsSource>
</HierarchicalDataTemplate>
<ui:XmlTemplateSelector
x:Key="NodeTemplateSelector"
NodeTemplate="{StaticResource NodeTemplate}"
TextTemplate="{StaticResource TextTemplate}"
AttributeTemplate="{StaticResource AttributeTemplate}" />
</TreeView.Resources>
</TreeView>
and :
public class XmlTemplateSelector:DataTemplateSelector{
public DataTemplate NodeTemplate { get; set; }
public DataTemplate TextTemplate { get; set; }
public DataTemplate AttributeTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container) {
XmlNode node = (XmlNode)item;
switch (node.NodeType) {
case XmlNodeType.Attribute:
return AttributeTemplate;
case XmlNodeType.Element:
return NodeTemplate;
case XmlNodeType.Text:
return TextTemplate;
}
throw new NotImplementedException(String.Format("not implemented for type {0}", node.NodeType));
}
}
So, the following is easy enough in WPF, but how would you do it in Silverlight?
Please note that the trick here is to display both Groups, and Entries on the same level.
Additonally you dont know how deep the entries are nested, they might be on the first, or the nth level.
This is hard in Silverlight because you lack the DataType="{x:Type local:Group}" property in the H.DataTemplate (or any DataTemplate). Building my own custom DataTempalteSelector also didnt work, because the Hierarchial ItemsSource gets lost. (Which just gave me a new idea which I will investigate shortly)
Example:
Group1
--Entry
--Entry
Group2
--Group4
----Group1
------Entry
------Entry
----Entry
----Entry
--Entry
--Entry
Group3
--Entry
--Entry
Your Classes:
public class Entry
{
public int Key { get; set; }
public string Name { get; set; }
}
public class Group
{
public int Key { get; set; }
public string Name { get; set; }
public IList<Group> SubGroups { get; set; }
public IList<Entry> Entries { get; set; }
}
Your xaml:
<TreeView Name="GroupView" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Group}" ItemsSource={Binding Items}">
<TextBlock Text="{Binding Path=Name}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Entry}" >
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
The TreeView control from the Silverlight toolkit supports hierarchical data templates.
Check out this article for sample usage, but it looks identical to me to the WPF built in one.
You can download the Silverlight toolkit here.
Here is an example of using the HierarchicalDataTemplate with a HeaderedItemsControl in Silverlight (Songhay.Silverlight.BiggestBox.Views.ClientView.xaml):
<UserControl x:Class="Songhay.Silverlight.BiggestBox.Views.ClientView"
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"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:sdk="clr-namespace:System.Windows;assembly=System.Windows.Controls"
xmlns:sdkctrls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
xmlns:v="clr-namespace:Songhay.Silverlight.BiggestBox.Views"
xmlns:m="clr-namespace:Songhay.Silverlight.BiggestBox.ViewModels">
<UserControl.Resources>
<Style x:Key="StackPanelRoot" TargetType="StackPanel">
<Setter Property="Background" Value="Seashell" />
<Setter Property="Height" Value="598" />
<Setter Property="Width" Value="1024" />
</Style>
<Style x:Key="GridRoot" TargetType="Grid">
<Setter Property="Height" Value="570" />
</Style>
<Style x:Key="ClientGridSplitter" TargetType="sdkctrls:GridSplitter">
<Setter Property="Background" Value="#FFE0EEE0" />
<Setter Property="Height" Value="8" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
<m:ClientViewModel x:Key="ClientViewModelDataSource" d:IsDataSource="True"/>
<Style TargetType="sdkctrls:HeaderedItemsControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdkctrls:HeaderedItemsControl">
<StackPanel>
<ItemsPresenter Margin="10,0,0,0" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollViewerIndexItems" TargetType="ScrollViewer">
<Setter Property="Margin" Value="10" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
</Style>
<Style x:Key="StackPanelIndexItems" TargetType="StackPanel">
<Setter Property="Background" Value="#ff9" />
<Setter Property="Orientation" Value="Horizontal" />
</Style>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource ClientViewModelDataSource}"/>
</UserControl.DataContext>
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center">
<StackPanel x:Name="RootPanel" Style="{StaticResource StackPanelRoot}">
<Grid Style="{StaticResource GridRoot}">
<Grid.RowDefinitions>
<RowDefinition MinHeight="128" MaxHeight="360" Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1.5*" />
</Grid.RowDefinitions>
<v:HeaderView Grid.Row="0" />
<sdkctrls:GridSplitter Grid.Row="1" Style="{StaticResource ClientGridSplitter}" />
<StackPanel Grid.Row="2"
Orientation="Horizontal"
Style="{StaticResource StackPanelIndexItems}">
<ScrollViewer Style="{StaticResource ScrollViewerIndexItems}">
<sdkctrls:HeaderedItemsControl
Header="{Binding IndexTitle}"
ItemsSource="{Binding Outlines}">
<sdkctrls:HeaderedItemsControl.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" FontWeight="Bold" Text="{Binding}" />
</DataTemplate>
</sdkctrls:HeaderedItemsControl.HeaderTemplate>
<sdkctrls:HeaderedItemsControl.ItemTemplate>
<sdk:HierarchicalDataTemplate>
<StackPanel>
<TextBlock FontSize="12" FontWeight="Bold" Margin="0,10,0,0" Text="{Binding Text}" />
<sdkctrls:HeaderedItemsControl ItemsSource="{Binding Outlines}" Margin="10,0,10,0">
<sdkctrls:HeaderedItemsControl.ItemTemplate>
<sdk:HierarchicalDataTemplate>
<HyperlinkButton
ClickMode="Press"
Command="{Binding IndexItemCommand, Source={StaticResource ClientViewModelDataSource}}"
CommandParameter="{Binding Url}"
FontSize="12">
<HyperlinkButton.Content>
<TextBlock Text="{Binding Text}" />
</HyperlinkButton.Content>
</HyperlinkButton>
</sdk:HierarchicalDataTemplate>
</sdkctrls:HeaderedItemsControl.ItemTemplate>
</sdkctrls:HeaderedItemsControl>
</StackPanel>
</sdk:HierarchicalDataTemplate>
</sdkctrls:HeaderedItemsControl.ItemTemplate>
</sdkctrls:HeaderedItemsControl>
</ScrollViewer>
<navigation:Frame x:Name="IndexFrame" Width="685">
</navigation:Frame>
</StackPanel>
</Grid>
<v:FooterView Height="30" />
</StackPanel>
</Border>
</UserControl>