LabeledPieChart: Style overrides DataTemplate - wpf

I have customized the template of LabeledPieChart (source: Bea) in a Style. Then I created a DataTemplate for the Slices of the LabeledPieChart. Both the style and the DataTemplate works great if they are alone. If they are together the Style overrides the DataTemplate that he has no effect. Is it possible to combine these two?
Here is my Code (The Style and the DataTemplate are in Window.Resources):
Style:
<Style TargetType="customControls:LabeledPieChart" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="customControls:LabeledPieChart">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="9*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dataVis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" Margin="0,5,0,3"/>
<Grid Grid.Row="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<chartPrmtvs:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Background="Transparent" />
<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />
</chartPrmtvs:EdgePanel>
</Grid>
</Grid>
<dataVis:Legend x:Name="Legend" Style="{TemplateBinding LegendStyle}" Title="{TemplateBinding LegendTitle}"
BorderThickness="0" Background="Transparent" FontSize="15" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
DataTemplate:
<DataTemplate DataType="{x:Type local:City}" >
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel Background="White" Orientation="Horizontal">
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type customControls:PieChartLabel}}, Path=FormattedRatio}" VerticalAlignment="Center" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Path=Population}" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Name}" Margin="0,0,5,0"/>
</StackPanel>
</Border>
</DataTemplate>
LabeldPieChart:
<Grid>
<customControls:LabeledPieChart
x:Name="labeledPieChart"
Title="Population of Puget Sound Cities"
Height="500" Width="700"
Grid.Row="3"
BorderBrush="Gray"
>
<customControls:LabeledPieChart.Series>
<customControls:LabeledPieSeries
x:Name="labeledPieSeries"
ItemsSource="{Binding}"
IndependentValuePath="Name"
DependentValuePath="Population"
IsSelectionEnabled="True"
LabelDisplayMode="Auto"
/>
</customControls:LabeledPieChart.Series>
</customControls:LabeledPieChart>
</Grid>

Related

Can't get Xaml TextBlock TextWrapping to work

My code is pretty straightforward:
<ListView Grid.Row="0" ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Grid.Row="0" Margin="0 2 0 2" BorderBrush="Black" BorderThickness="1" x:Name="ListItem" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontWeight="Bold" FontSize="18" />
<Image Grid.Row="0" Grid.Column="1" Source="../Images/x.png" HorizontalAlignment="Right"/>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.ColumnSpan="2" MaxWidth="{Binding ElementName=ListItem, Path=Width}">
<TextBlock TextWrapping="WrapWithOverflow" Text="{Binding Description}" />
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding TimeStamp}" HorizontalAlignment="Right"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
But the listview width becomes bigger than window's width every times there's an item with long descriptions
Neither the HorizontalContentAlignment setter, nor TextWrapping or MaxWitdh work.
What am I doing wrong??
Disable horizontal scrolling:
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>

how to draw a horizontal and vertical line under specific gridcolumn in wpf

I'm trying to draw a vertical line under a specific column.so anyone tell me how to draw a line horizontally and vertically
<Window x:Class="WPFDataGrid.GroupBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GroupBox" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="186"/>
<RowDefinition Height="72"/>
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
<GroupBox Header="Select Option" Height="150" HorizontalAlignment="Left" Name="gb1" VerticalAlignment="Top" Width="250" BorderBrush="Black" BorderThickness="1" Margin="11" Padding="11">
<StackPanel>
<CheckBox Content="Add Cream" Margin="3.5"/>
<CheckBox Content="Add Suger" Margin="3.5"/>
<CheckBox Content="Add Flavering" Margin="3.5"/>
<CheckBox Content="Add Biscuit" Margin="3.5"/>
</StackPanel>
</GroupBox>
<Separator Grid.Row="1" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black" />
</Grid>
You can use a <Separator/> Link
or maybe a GridSplitter Link
here is a sample of both:
<Grid x:Name="grid1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="259"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Text="Some text"/>
<StackPanel Grid.Row="1">
<TextBox Text="Some text"/>
<Separator />
<TextBox Text="2nd text box"/>
</StackPanel>
<TextBox Text="Some Text" Grid.Column="1" />
<GridSplitter Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Width="3" Background="Black"/>
<GridSplitter Grid.Row="0" Grid.ColumnSpan="2" Width="Auto" Height="3" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black"/>
</Grid>
It's Pretty Easy. Pick your Grid location and Y1, Y2 for a vertical line or X1, X2 for a Horizontal Line. Below is an example for a vertical line.
<Line Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" Stroke="AliceBlue" StrokeThickness="4" Y1="100" Y2="600" Margin="20,0,0,0"></Line>
<Grid>
<Grid.Resources>
<Style x:Key="lineStyle" TargetType="Line">
<Setter Property="Stroke" Value="Gray" />
<Setter Property="Stretch" Value="Fill" />
<Setter Property="Grid.ZIndex" Value="100" />
</Style>
<Style x:Key="horizontalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">
<Setter Property="X2" Value="1" />
<Setter Property="X1" Value="0" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Grid.ColumnSpan"
Value="{Binding
Path=ColumnDefinitions.Count,
RelativeSource={RelativeSource AncestorType=Grid}}" />
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
<Style x:Key="verticalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">
<Setter Property="Y2" Value="1" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Grid.RowSpan"
Value="{Binding
Path=RowDefinitions.Count,
RelativeSource={RelativeSource AncestorType=Grid}}" />
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Line Style="{StaticResource horizontalLineStyle}" />
<Line Grid.Row="0" Style="{StaticResource horizontalLineStyle}" />
<Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}" />
<Line Grid.Column="0" Style="{StaticResource verticalLineStyle}" />
<Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
<Line Grid.Column="2" Style="{StaticResource verticalLineStyle}" />
<Line Grid.Column="3" Style="{StaticResource verticalLineStyle}" />
<Line Grid.Column="4" Style="{StaticResource verticalLineStyle}" />
<Label Content="" Grid.Row="0" Grid.Column="0" HorizontalContentAlignment="Center" FontWeight="Bold" Foreground="White"/>
<Label Content="Dword" Grid.Row="0" Grid.Column="1" HorizontalContentAlignment="Center" FontWeight="Bold" Foreground="White"/>
<Label Content="Words" Grid.Row="0" Grid.Column="2" HorizontalContentAlignment="Center" FontWeight="Bold" Foreground="White"/>
<Label Content="Bytes" Grid.Row="0" Grid.Column="3" HorizontalContentAlignment="Center" FontWeight="Bold" Foreground="White"/>
<Label Content="Bits" Grid.Row="0" Grid.Column="4" HorizontalContentAlignment="Center" FontWeight="Bold" Foreground="White"/>
</Grid>

Set TextBlock width to 100% inside DataTemplate in Windows Store app

I have this XAML and having problems with grid width.
<DataTemplate x:Key="FormTileItemTemplate">
<Grid Height="70" Background="#FFECECEC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="38" />
</Grid.ColumnDefinitions>
<StackPanel Margin="10,0,20,15" VerticalAlignment="Bottom">
<TextBlock Text="{Binding FormName}" Foreground="Black" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="0" FontSize="34.667" FontWeight="Light" LineHeight="32" />
</StackPanel>
<Grid Grid.Column="1">
<Image Stretch="UniformToFill" Source="/Assets/Images/FormCompleteRed.png" />
</Grid>
</Grid>
</DataTemplate>
<Grid x:Name="itemFormsGrid" Margin="0,60,0,50">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="0,0,20,0" Width="100" Height="100" Source="/Assets/Images/session-forms.png" Stretch="UniformToFill" HorizontalAlignment="Right" />
<ListView
x:Name="formListView"
Grid.Row="1"
IsSwipeEnabled="False"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource FormTileItemTemplate}"
d:DataContext="{Binding Path=SessionForms, Source={d:DesignInstance Type=SampleData:SessionReviewDesignDataSource, IsDesignTimeCreatable=True} }"
Margin="0,20,0,0" />
</Grid>
Here is the output. Output
But I need the TextBlock to stretch way up to right. Appreciate any help.
Set HorizontalContentAlignment property like below to stretch the ListViewItems
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

Style each datagrid column header

I want to add another row to the HeaderRow and for each column insert specific control.
This is my code where add this row, but I can only set same control (in this case textbox) for every column, but I want to set specific control for specific column.
(like it's done in ASP.NET repeater)
<Style x:Key="DataGridColumnHeaderStyle1" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="ColumnHeader" Grid.Row="0" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="18" />
<Grid Grid.Row="1">
<TextBox Text="" HorizontalAlignment="Stretch" BorderThickness="0,1,1,1" />
</Grid>
</Grid>
</Style>
You can Make use of the HeaderTemplate to specify different datatemplates for each Column
Sample
<Window.Resources>
<DataTemplate x:Key="Template1">
<Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="ColumnHeader" Text="Student Id" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="18" />
<Grid Grid.Row="1">
<TextBox Text="" HorizontalAlignment="Stretch" BorderThickness="0,1,1,1" />
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="Template2">
<Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="ColumnHeader" Text="Student Name" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="18" />
<Grid Grid.Row="1">
<TextBox Text="" HorizontalAlignment="Stretch" BorderThickness="0,1,1,1" />
</Grid>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid Name="dataGrid" >
<DataGrid.Columns>
<DataGridTextColumn HeaderTemplate="{StaticResource Template1}" Width="90*" MinWidth="120" Binding="{Binding StudentId}"/>
<DataGridTextColumn HeaderTemplate="{StaticResource Template2}" Width="90*" MinWidth="120" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Score" Width="100*" MinWidth="150" Binding="{Binding Score}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
I approached this a little bit different, I styled DataGridColumnHeadersPresenter, it allows me to syle the column headers row (instead of column header).
There I add my new row and all the controls I need, I alsoe set the width of every cell to match the width of it's header .
<Style x:Key="DataGridColumnHeadersPresenterStyle1" TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGridColumnHeader x:Name="PART_FillerColumnHeader" IsHitTestVisible="False"/>
<ItemsPresenter/>
<Grid Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ActualWidth, ElementName=Col1}"/>
<ColumnDefinition Width="{Binding ActualWidth, ElementName=Col2}"/>
<ColumnDefinition Width="{Binding ActualWidth, ElementName=Col3}"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="Auto" Height="25" BorderThickness="1,2,0,2"/>
my other controls go here
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

Decorating UserControl WPF

I want to decorate some controls in groups like:
<UserControl x:Class="Infrastructure.UI.ItemsGroup" ... >
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Red">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" />
<TextBlock x:Name="ctrlGroupText" Grid.Row="1" HorizontalAlignment="Center" />
</Grid>
</Border>
</UserControl>
And use it in other XAML-files like:
<Grid Grid.Column="0">
<UI:ItemsGroup GroupText="Hello World">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button>1111</Button>
<Button>1111</Button>
</Grid>
</UI:ItemsGroup>
</Grid>
But it doesn't work. What did I wrong? :)
Thanks
You need to edit the Template for the UserControl instead of adding the Border as the Child
<UserControl x:Class="Infrastructure.UI.ItemsGroup" ... >
<UserControl.Template>
<ControlTemplate TargetType="{x:Type UserControl}">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Red">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" />
<TextBlock x:Name="ctrlGroupText" Grid.Row="1" HorizontalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</UserControl.Template>
</UserControl>
Update
To set the Text for the TextBlock to GroupText you can use a Binding
<TextBlock x:Name="ctrlGroupText"
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ItemsGroup}},
Path=GroupText}"
Grid.Row="1"
HorizontalAlignment="Center" />

Resources