Show legend item into two column - wpf

I am using WpfToolkit to draw a Pie chart,and I like to show my legend into two column due to my legend is to much,how can I solve it?
<chartingToolkit:Chart Height="auto" x:Name="PieChart2" Title="{Binding}"
VerticalAlignment="Top" Grid.Row="0" Grid.ColumnSpan="3" Margin="5" LegendTitle="Label" >
<chartingToolkit:PieSeries DependentValuePath="Value"
IndependentValuePath="Key" ItemsSource="{Binding}">
</chartingToolkit:PieSeries>
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</charting:Chart.LegendStyle>
</chartingToolkit:Chart>
Thanks in advance!

As per your need , I have changed the ControlTemplate of the Legend a litte as shown below
<ControlTemplate x:Key="LegendControlTemplate1"
TargetType="{x:Type visualizationToolkit:Legend}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<visualizationToolkit:Title x:Name="HeaderContent"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Row="0"
Style="{TemplateBinding TitleStyle}" />
<ScrollViewer BorderThickness="0"
IsTabStop="False"
Padding="0"
Grid.Row="1"
VerticalScrollBarVisibility="Auto">
<!--<ItemsPresenter x:Name="Items"
Margin="10,0,10,10" >
</ItemsPresenter>-->
<ItemsControl x:Name="Items"
Margin="10,0,10,10"
ItemsSource="{TemplateBinding ItemsSource}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
I am not sure whether this suites your requirement or not..Please mark it as answer if satisfied.

Related

Apply a controltemplate on a Custom XamDataGrid

I'm trying to make a ControlTemplate to my CustomXamDataGrid class which inherits from infragistics XamDataGrid. I want to show something like a statusbar which indicates how many records are there or selected on the bottom of the XamDataGrid.
I tried some like this:
<Style TargetType="{x:Type controls:CustomXamDataGrid}">
<Setter Property="Background" Value="{StaticResource XamGridBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource XamGridBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:CustomXamDataGrid}">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="PART_ContentHost" />
<ScrollBar x:Name="VerticalScrollBar" Width="22" Grid.Row="0" Grid.Column="1" Style="{StaticResource ScrollBarStyleDoubleArrows}" />
<ScrollBar x:Name="HorizontalScrollBar" Height="16" Grid.Row="2" Style="{StaticResource ScrollBarStyle}" />
</Grid>
<Border Height="25"
Visibility="Visible"
Grid.Row="1"
Margin="0,-1,0,0"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,1,0,0" SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label Content="Total Records: XXX (TODO: Template Binding)" Foreground="Black"/>
<Label Content="Visible Records: XXX (TODO: Template Binding)" Margin="15,0,0,0" Visibility="Visible" Foreground="Black"/>
<Label Content="Selected Records: XXX (TODO: Template Binding)" Margin="15,0,30,0" Foreground="Black"/>
</StackPanel>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It only shows the statusbar properly. The XamDataGrid itself with his calumns and rows are completely empty.

Add Label that move along my custom Progress-Bar

I have this GridViewColumn.CellTemplate:
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Margin="-6,0,0,0">
<ProgressBar Name="progressBarColumn"
Minimum="0"
Maximum="100"
Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource CustomProgressBar4}"
Width="350"
Margin="0,0,0,0"/>
<TextBlock x:Name="fileNameTextBlock"
Text="{Binding File}"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
Inside my Progress-Bar instead of show the Percentage i change it to show my Binding File:
Text="{Binding File}"
And my Style:
<Style x:Key="CustomProgressBar4" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid x:Name="Root">
<Border Name="PART_Track"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"/>
<Border Name="PART_Indicator"
CornerRadius="5"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So my Progress-Bar is filled according my Progress value (binding) and i want to add simple Label\TextBlock that will locate on the right side of my Progress-Bar and will show my Progress value.
Any suggestions how to do that ?
just simply define two Grid columns then add a TextBlock to the second column
<Style TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="Root" Grid.Column="0">
<Border Name="PART_Track"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="5" />
<Border Name="PART_Indicator"
HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
CornerRadius="5" />
</Grid>
<TextBlock Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

GroupBox's ControlTemplate and RowDefinitions's Height

I was learning how to change the ControlTemplate and came across this post. I copied the ControlTemplate and created a GroupBox.
<UserControl x:Class="MyTestApp.UserControl1"
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="130" d:DesignWidth="250">
<Grid>
<Grid.Resources>
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="CheckedGroupBoxStyle" TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="#D5DFE5"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
<ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
<Border Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
<Border.OpacityMask>
<MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Border>
</Border>
<Border x:Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Padding="3,1,3,0">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Style="{StaticResource CheckedGroupBoxStyle}">
<GroupBox.Header>
<CheckBox>GroupBox1</CheckBox>
</GroupBox.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Item A" Grid.Column="0" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="0"></TextBox>
<TextBlock Text="Item B" Grid.Column="0" Grid.Row="1" />
<TextBox Grid.Column="1" Grid.Row="1"></TextBox>
<TextBlock Text="Item C" Grid.Column="0" Grid.Row="2" />
<TextBox Grid.Column="1" Grid.Row="2"></TextBox>
<TextBlock Text="Item D" Grid.Column="0" Grid.Row="3" />
<TextBox Grid.Column="1" Grid.Row="3"></TextBox>
</Grid>
</GroupBox>
</Grid>
</Grid>
</UserControl>
The problem is there is a border around the Grid that's inside the GroupBox. It can be removed by changing Height="Auto" to Height="*" for RowDefinition. If I don't use the CheckedGroupBoxStyle, then the border will not show up either. I want know why because the aforementioned post says the resulting style is almost identical to the default template of the control.
It appears as though you have not added the BorderGapMaskConverter to your code example. After a quick search on MSDN, I found that it is in fact a Converter that is included in the .NET Framework. You can find details of it on the BorderGapMaskConverter Class page. You will be able to use it if you are using .NET 3.0 or above.
UPDATE >>>
No sorry, 'implemented' is no longer the correct word... initially, I thought that you would have to implement your own Converter. However, now that I found out that it is included in the .NET Framework, you just need to add a reference to it in your XAML Resources section like in the example in the other post:
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
Mind you, you should have had a warning in the Visual Studio Error List saying something like:
The resource "BorderGapMaskConverter" could not be resolved.

Include xaml element in xaml

I have two separate styles in which I am trying to include the same basic elements. For example, HorizontalButton has this style:
<Style x:Key="HorizontalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And VerticalButton has this style:
<Style x:Key="VerticalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, outerBorder has different attributes set depending on whether or not the button is vertical or horizontal, but all of the inner elements from innerBorder inwards are identical. Is there a way I can do some kind of an include or reference in xaml so that I would only have to make changes to one instance of the inner elements to get the same results?
You might be able to use a ContentControl with the ContentTemplate set to a DataTemplate containing all your shared elements
<DataTemplate x:Key="MySharedXaml">
<!-- Shared XAML here -->
</DataTemplate>
then in your controls, simply use this wherever you want your shared XAML
<ContentControl ContentTemplate="{StaticResource MySharedXAML}">
<ContentPresenter />
</ContentControl>
The only thing I'm not sure of is the Bindings. You might need to tweak your XAML a bit to make sure the bindings get set correctly.

WPF Groupbox Control Header with Button and text aligned Opposite

I want to achieve such an interface using WPF groupbox control
Is there a way to achieve such an interface with WPF groupbox control?
A simple option is to just overlap the controls and then play around with margins
<Grid>
<GroupBox Header="Title" Margin="0,3,0,0" />
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,10,0">
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
If you wanted a re-usable style then you would need to extract the GroupBox's control template and modify that. Something like
<Page.Resources>
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="#D5DFE5"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
<Binding ElementName="Header" Path="ActualWidth"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Border>
</Border>
<StackPanel Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" >
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Grid>
<GroupBox Header="Title" Style="{StaticResource GroupBoxStyle1}"></GroupBox>
</Grid>
</Grid>
I needed the same thing, found the answer here:
http://wpf.2000things.com/2013/06/05/835-displaying-custom-content-in-a-groupbox-header/
Don't know which version of .NET
Simple example:
<GroupBox>
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Button Content="Click Me"/>
<Button Content="Click Me Too"/>
</StackPanel>
</GroupBox.Header>
<TextBlock Text="Content of box"/>
</GroupBox>

Resources