What approach can be used for enabling users to define their own application preferences by setting personal values in some custom controls styles?
We can set them in XAML in design-time:
<UserControl.Resources>
<Style TargetType="{x:Type cc:MyControl}">
<Setter Property="SWidth" Value="20" />
...
<Setter Property="SBrush" Value="Blue" />
</Style>
</UserControl.Resources>
But how to edit these style values in runtime?
You'll want to bind the values in your style to some static class—for example, the application's default settings—that can be modified by whatever class defines what the values should be.
In the app below, I created a property called FontSize in the Settings.settings file. I added the appropriate namespace in the XAML file and can now bind to it as I like:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication1"
xmlns:prop="clr-namespace:WpfApplication1.Properties"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="myStyle">
<Setter Property="FontSize" Value="{Binding FontSize, Source={x:Static prop:Settings.Default}}" />
</Style>
</Grid.Resources>
<TextBlock Style="{DynamicResource myStyle}" Text="The quick brown fox jumped over the lazy dog." />
<TextBox Grid.Row="1" Text="{Binding FontSize, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</Window>
I bound the value directly to a TextBox but it goes without saying that some control mechanism, in a viewmodel for instance, is strongly recommended.
Finally, if you want to save the settings, all you have to do is call the class's Save method, for example, in the event handler of the application's Exit event:
private void Application_Exit(object sender, ExitEventArgs e)
{
WpfApplication1.Properties.Settings.Default.Save();
}
Related
I'm currently working on an app to show all parking spaces in Kortrijk (a city in Belgium). This is how it looks at the moment:
Design
My question is: how can I for example change the color of the element on mouseover or on click. I want to accomplish this in the XAML and this is the code that I have now.
Code
MainPage.xaml
<Page
x:Class="ParkingSpots.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots"
xmlns:model="using:ParkingSpots.model"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">
<Page.Resources>
<model:ParkingSpot x:Key="spots"/>
</Page.Resources>
<Grid Style="{StaticResource mainGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Parking spots in Kortrijk"/>
<ListView ItemsSource="{Binding Source={StaticResource spots}, Path=ParkingSpots}" ItemTemplate="{StaticResource ParkingSpotTemplate}" ItemsPanel="{StaticResource ParkingSpotsTemplate}"/>
</Grid>
style.xaml (external xaml file)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots.style"
xmlns:conv="using:ParkingSpots.converter">
<conv:StreetConverter x:Key="StreetConv" />
<Color x:Key="Color1">#FFB3B6F2</Color>
<Color x:Key="Color2">#FF5A58D9</Color>
<Color x:Key="Color3">#FFF2F2F2</Color>
<SolidColorBrush x:Key="Color1Brush" Color="{StaticResource Color1}" />
<SolidColorBrush x:Key="Color2Brush" Color="{StaticResource Color2}" />
<SolidColorBrush x:Key="Color3Brush" Color="{StaticResource Color3}" />
<Style x:Name="mainGrid" TargetType="Grid">
<Setter Property="Background" Value="{StaticResource Color1Brush}"/>
</Style>
<DataTemplate x:Key="ParkingSpotTemplate">
<ListViewItem>
<ListViewItem.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource Color3Brush}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="8,0,0,0" />
</Style>
</ListViewItem.Resources>
<TextBlock x:Name="ParkingSpotInfo" Grid.Row="0" Grid.Column="0" Text="{Binding Street, Converter={StaticResource StreetConv}}"/>
</ListViewItem>
</DataTemplate>
<ItemsPanelTemplate x:Key="ParkingSpotsTemplate">
<VariableSizedWrapGrid x:Name="wrapGrid"></VariableSizedWrapGrid>
</ItemsPanelTemplate>
I tried something with style.triggers but this is only possible in WPF apps and not in UWP apps. I've also read a lot of things about visualstates but I don't know how to use it and if this is the best way to do such effects.
Thanks in advance
You should probably be using a ListView to display this data instead of an ItemsControl (unless you have a good reason for doing so). ListView extends from ItemsControl and adds to it lots of useful features, such as:
Single/multiple item selection.
ItemClick event.
Each item container is a ListViewItem control which has its own features like visual states and a checkbox, and the presentation of the ListViewItem is managed by a ListViewItemPresenter which can deliver these features in an optimized manner.
Built-in ScrollViewer.
Data and UI virtualization. UI virtualization is a big advantage when you have 100s of items.
Accessible. Supports tab-focusing.
Probably more...
ItemsControl isn't typically used for situations where you want to interact with the items (by click/tap, for example).
ListView by default has its own style which can be easily overridden to match what you have already.
If you only want to style the ListViewItem background/foreground for each visual state, then you can override these styles:
<ListView>
<ListView.Resources>
<!--
These resources are applied to this ListView only. Put in a
higher scope (page or app) depending on what you want it to affect.
-->
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ListViewItemForegroundPointerOver" Color="Violet"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Yellow"/>
<SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="LimeGreen"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Cyan"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Orange"/>
</ListView.Resources>
</ListView>
My reusable Button is basically a single button, of which ControlTemplate consists of a TextBlock and an Image. The Text property of TextBlock binds to a DependencyProperty to be exposed; similarly, the Source property of Image binds to a DependencyProperty. Here is the code for this Button.
<Button x:Class="Core.Resource.UserControlResource.NavigationButton1"
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"
xmlns:local="clr-namespace:Core.Resource.UserControlResource"
mc:Ignorable="d"
x:Name="myself">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="63"></ColumnDefinition>
<ColumnDefinition Width="63"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Name="IconImage" Height="42" Width="42" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{Binding ElementName=myself, Path=ScreenIcon}" />
<TextBlock Grid.Column="1" Text="{Binding ElementName=myself, Path=ScreenTitle}" FontSize="25" TextWrapping="Wrap" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
where ScreenTitle and ScreenIcon are the aforementioned DependecyProperty.
Now, I want to use this Button in its "parent", a UserControl. The code will be like
<UserControl x:Class="Core.ParentControl"
x:Name="parent"
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:usrCtrlResrc="clr-namespace:Core.Resource.UserControlResource;assembly=Core.Resource"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32"/>
<ColumnDefinition Width="32"/>
<Grid.ColumnDefinitions>
<usrCtrlResrc:NavigationButton1 ScreenTitle="sample Screen Title" ScreenIcon="/Core.Resource;component/MediaResource/pencilEdit.png">
<TextBlock Grid.Column="1" Name="txtBlk" Text="SampleSample"/>
</Grid>
However, in order to add reactions when the Button is clicked (say to change the Grid.ColumnSpan property of TextBlock "txtBlk" to 2), what I want to do else is assign EventTriggers to my reusable Button in the "parent". I initially thought of two ways, but none of them works.
In my reusable Button, bind Style.Triggers to a DependencyProperty to get exposed to its "parent". However, it pops up "The property Triggers does not have an accessible setter".
Move the Style of my reusable Button to a ResourceDictionary and assign a Key for the "parent" to use. However, by doing this, I am not sure how to handle my two DependencyProperty, because it is not supposed to have code-behind for a ResourceDictionary file.
Any other workarounds? Thanks in advance.
I finally resolve this problem by directly override its Triggers. Code is as below.
<usrCtrlResrc:NavigationButton1 ScreenTitle=... ScreenIcon=...>
<usrCtrlResrc:NavigationButton1.Triggers>
<EventTrigger RoutedEvent="usrCtrlResrc:NavigationButton1.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
...
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</usrCtrlResrc:NavigationButton1.Triggers>
</usrCtrlResrc:NavigationButton1>
I have a Window with AvalonDock. On startup there is one Document opened which is filled with LocControllers usercontrols (LocControllersViewModel).
Now I want to have that when there is doubleclicked on a LocController that the LocController usercontrol opens in a new Document. So the first document is always the overview, filled with LocController usercontrols, and the other Documents are added after a double click.
I've looked at the AvalonDock and MVVM sample, but I can't figure out how to get the behavior that I want.
What I've found out so far is that I have to use the DocumentsSource property to bind the documents. So I guess I need to create a collection of DocumentViewModels to bind to the DocumentsSource property. That DocumentViewModel I need to fill with usercontrols. For the first Document is will be a list of LocController usercontrols, for the other Documents it can be other usercontrols.
Can anyone provide me with a small code example? i don't think it is that hard, but I just can't find it :(
EDIT: Here's my current DockingManager XAML:
<Window x:Class="AvalonDockMvvmTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:AvalonDockMvvmTest="clr-namespace:AvalonDockMvvmTest"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="File">
<MenuItem Header="NewDetail"
Command="{Binding NewCommand}" />
<MenuItem Header="OpenSelectDetail"
Command="{Binding OpenCommand}" />
</MenuItem>
</Menu>
<xcad:DockingManager x:Name="DockManager"
Margin="3 0 3 0"
DocumentsSource="{Binding Documents, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<xcad:DockingManager.LayoutItemTemplateSelector>
<AvalonDockMvvmTest:PanesTemplateSelector>
<AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>
<DataTemplate DataType="{x:Type AvalonDockMvvmTest:OverviewViewModel}"> <!-- Overview user control -->
</DataTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>
<AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>
<DataTemplate DataType="{x:Type AvalonDockMvvmTest:DetailViewModel}"> <!-- Detail user control -->
</DataTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
</xcad:DockingManager>
</Grid>
</Window>
So how do I load the different controls (overview and detail) to the document pane?
Ok, it took me some time, but I finally got it working the way I want.
Picking code from the AvalonDock MMVM sample and the CodeProject 'AvalonDock [2.0] Tutorial'
The result: when the application starts the overview is loaded in the first document tab.
When you click the newdetail menuitem, a new document tab is added, after the overview tab.
The overview tab is set to be unable to close.
There are some more things to do, like adding a side - and bottom panel. So I'm not done yet, but I think if I got so far the other panels can be done too.
Screenshot:
XAML:
<Window x:Class="AvalonDockMvvmTest.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:Pane="clr-namespace:AvalonDockMvvmTest.View.Pane"
xmlns:ViewModel="clr-namespace:AvalonDockMvvmTest.ViewModel"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Region Menu-->
<Menu>
<MenuItem Header="File">
<MenuItem Header="NewDetail"
Command="{Binding NewCommand}" />
<MenuItem Header="OpenSelectDetail"
Command="{Binding OpenCommand}" />
</MenuItem>
</Menu>
<!-- EndRegion Menu-->
<!-- Region DockingManager -->
<xcad:DockingManager x:Name="DockManager"
Margin="3 0 3 0"
DocumentsSource="{Binding Files}"
Grid.Row="1">
<xcad:DockingManager.LayoutItemTemplateSelector>
<Pane:PanesTemplateSelector>
<!-- Overview (startpage)-->
<Pane:PanesTemplateSelector.OverViewTemplate>
<DataTemplate DataType="{x:Type ViewModel:OverviewViewModel}">
<!-- Add UserControl here-->
<TextBox Text="{Binding ContentText}"/>
</DataTemplate>
</Pane:PanesTemplateSelector.OverViewTemplate>
<!--Detail controls-->
<Pane:PanesTemplateSelector.DetailTemplate>
<DataTemplate DataType="{x:Type ViewModel:DetailViewModel}">
<!-- Add UserControl here-->
<TextBox Text="{Binding ContentText}" />
</DataTemplate>
</Pane:PanesTemplateSelector.DetailTemplate>
</Pane:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
<xcad:DockingManager.LayoutItemContainerStyleSelector>
<Pane:PanesStyleSelector>
<!-- Overview (startpage) style -->
<Pane:PanesStyleSelector.OverviewStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title"
Value="{Binding Model.Title}" />
<Setter Property="ToolTip"
Value="{Binding Model.Title}" />
<Setter Property="CloseCommand"
Value="{Binding Model.CloseCommand}" />
<Setter Property="ContentId"
Value="{Binding Model.ContentId}" />
</Style>
</Pane:PanesStyleSelector.OverviewStyle>
<!-- Detail style -->
<Pane:PanesStyleSelector.DetailStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title"
Value="{Binding Model.Title}" />
<Setter Property="ToolTip"
Value="{Binding Model.Title}" />
<Setter Property="ContentId"
Value="{Binding Model.ContentId}" />
</Style>
</Pane:PanesStyleSelector.DetailStyle>
</Pane:PanesStyleSelector>
</xcad:DockingManager.LayoutItemContainerStyleSelector>
</xcad:DockingManager>
<!-- EndRegion DockingManager -->
</Grid>
</Window>
I'm just trying for the first time to use a ControlTemplate for a button that I want to create.
However, as soon as I put the tag <ControlTemplate> anywhere, it is coming up with an error.
<Window x:Class="MAQButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="695" Width="996">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#FFE9F1F6"></Grid>
<Grid Grid.Column="1" Background="#FFD2E3ED">
</Grid>
</Grid>
<ControlTemplate></ControlTemplate>
</Window>
Where do I put the tag so that this error doesn't come up?
Templates, like Styles, Brushes, DataTemplates are Resources, and usually placed inside a resource dictionary or a resource section in your control.
<Window>
<Window.Resources>
<ControlTemplate TargetType="{x:Type Button}"/>
<ControlTemplate x:Key="myTemplate" TargetType="{x:Type Button}"/>
<Window.Resources>
<!-- this will use your implicit defined template -->
<Button />
<!-- this will use your explicit defined template called myTemplate-->
<Button Template="{StaticResource myTemplate}"/>
</Window>
Just being new to WPF I"m not sure what control or approach would be best for this requirement, for a WPF application.
I want to present a summary table of information, but the user should be able to decide to view the information based on either: "All Time", Month, Week or Day.
I'd like to visually have the selection of the option appear at the top of this section and have it appear as a TabControl
I'm not sure however whether TabControl is the best choice re repeating the table for each Tab Item
So overall functionally what would work is just radio buttons across the top, however what I want visually is a TabControl look
What would be the best way to achieve the TabControl look but with a programming approach for which I don't have to repeat things in each Tab Item?
For example, would I use a TabControl and then a WPF template to do the equivalent of an include in each Tab Item but with a different input parameter? (haven't used WPF templates before)
Thanks
Since you want the behavior of a group of RadioButtons and you want the visual appearance of a TabItem, you should use RadioButton controls and style them such that they look like TabItem controls. Here is a very simple example:
<Window x:Class="TabTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border x:Name="tabBorder" BorderThickness="1" BorderBrush="Black"
Margin="0,0,-4,0"
CornerRadius="2,12,0,0"
Background="White"
SnapsToDevicePixels="True">
<ContentPresenter
Margin="12,2,12,2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="tabBorder" Property="Background" Value="LightBlue" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,-1" Panel.ZIndex="1">
<RadioButton>All Time</RadioButton>
<RadioButton IsChecked="True">Month</RadioButton>
<RadioButton>Week</RadioButton>
<RadioButton>Day</RadioButton>
</StackPanel>
<Border Grid.Row="1" Background="LightBlue"
BorderThickness="1" BorderBrush="Black"
SnapsToDevicePixels="True">
<Button Margin="10" Grid.Row="1">This is a test</Button>
</Border>
</Grid>
</Window>
In this example, the Button is the place where you would put your summary table.
Greg, I suppose, grouping grid would be the most ideal control of your requirement. Either you can customize the datagrid as explained in the following article. But this would take more time to get things right.
http://blog.smoura.com/wpf-toolkit-datagrid-part-iv-templatecolumns-and-row-grouping/
or else you could make use of commercial WPF Grid grouping control which would match you requirement.
What would be the best way to achieve the TabControl look but with a programming approach for which I don't have to repeat things in each Tab Item?
Use a TabControl. Have each TabItem contain a CollectionViewSource based on the same underlying collection of data, but with a different filter. Use a DataTemplate to present the CollectionViewSource.
Filtering requires some kind of code-behind, but here's a XAML-only demo that does sorting:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
<Page.Resources>
<XmlDataProvider x:Key="Data">
<x:XData>
<Data xmlns="">
<Item Date="2010-01-01" Value="January"/>
<Item Date="2010-02-01" Value="February"/>
<Item Date="2010-03-01" Value="March"/>
<Item Date="2010-04-01" Value="April"/>
<Item Date="2010-05-01" Value="May"/>
<Item Date="2010-06-01" Value="June"/>
<Item Date="2010-07-01" Value="July"/>
<Item Date="2010-08-01" Value="August"/>
<Item Date="2010-09-01" Value="September"/>
</Data>
</x:XData>
</XmlDataProvider>
<CollectionViewSource x:Key="ByDate" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="#Date"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<CollectionViewSource x:Key="ByValue" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="#Value"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<DataTemplate DataType="{x:Type CollectionViewSource}">
<Border Margin="5" BorderBrush="DodgerBlue" BorderThickness="1" CornerRadius="4">
<DockPanel Margin="5">
<Label DockPanel.Dock="Top">This is here to show how you can make the layout of your TabItems complex without repeating yourself.</Label>
<ListBox DockPanel.Dock="Top" x:Name="Items" ItemsSource="{Binding}" DisplayMemberPath="#Value" SelectedValuePath="#Value"/>
<DockPanel>
<Label>Selected item: </Label>
<Label Content="{Binding ElementName=Items, Path=SelectedValue}"/>
</DockPanel>
</DockPanel>
</Border>
</DataTemplate>
</Page.Resources>
<Grid>
<TabControl>
<TabItem Header="By date" Content="{StaticResource ByDate}"/>
<TabItem Header="By value" Content="{StaticResource ByValue}"/>
</TabControl>
</Grid>
</Page>