Hello,
I'm new to WPF but have been developing software for more than 22 years (vast majority has been in C#).
I'm looking for information on how to properly format the CardView's CardHeaderTemplate. I'd like to be able to put a line break between two pieces of data:
Table # 5
Guests 3
Following is my xaml:
<telerik:RadCardView CardLayout="Rows"
Height="Auto" Width="Auto"
ItemsSource="{Binding PartyCards}"
CardHeaderBinding="{Binding Path=.}"
AutoGenerateDataFieldDescriptors="False"
IsReadOnly="true">
<telerik:RadCardView.CardHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="Table # " FontWeight="Bold" Foreground="White" />
<Label Content="{Binding TableNumber}" FontWeight="Bold" Foreground="White" />
<Label Content="Guests " FontWeight="Bold" Foreground="White" />
<Label Content="{Binding GuestCount}" FontWeight="Bold" Foreground="White" />
</StackPanel>
</DataTemplate>
</telerik:RadCardView.CardHeaderTemplate>
<telerik:RadCardView.DataFieldDescriptors>
<telerik:CardDataFieldDescriptor Header="" DataMemberBinding="{Binding OrderItems}" />
</telerik:RadCardView.DataFieldDescriptors>
</telerik:RadCardView>
Much appreciated!!
-Mark
4 Answers, 1 is accepted
Hello Mark,
To achieve the wanted behavior, you could add the labels for the tables and the labels for the guests each in a separate StackPanel, that are set in a Grid layout, and using the RowDefinitions collection, to order the two panels as needed. That said, I have modified the provided code snippet to implement this approach:
<telerik:RadCardView CardLayout="Rows"
Height="Auto" Width="Auto"
ItemsSource="{Binding PartyCards}"
CardHeaderBinding="{Binding Path=.}"
AutoGenerateDataFieldDescriptors="False"
IsReadOnly="true">
<telerik:RadCardView.CardHeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label Content="Table # " FontWeight="Bold" Foreground="White" />
<Label Content="{Binding TableNumber}" FontWeight="Bold" Foreground="White" />
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Label Content="Guests " FontWeight="Bold" Foreground="White" />
<Label Content="{Binding GuestCount}" FontWeight="Bold" Foreground="White" />
</StackPanel>
</Grid>
</DataTemplate>
</telerik:RadCardView.CardHeaderTemplate>
<telerik:RadCardView.DataFieldDescriptors>
<telerik:CardDataFieldDescriptor Header="" DataMemberBinding="{Binding OrderItems}" />
</telerik:RadCardView.DataFieldDescriptors>
</telerik:RadCardView>
In conclusion, could you give this approach a try?
Regards,
Stenly
Progress Telerik
Thanks Stenly.
That did the trick.
I do have one more question though, the weight of the text displayed in the CardHeaderTemplate will not Bold. This was something I noticed prior posting my question and am still having issues with it.
My markup is very similar to yours and its the FontWeight="Bold" in the Table # and Guests labels that I'm referring to. In fact, no controls in my markup are bold when they should be.
My thought was that I had a style (somewhere) overriding it but my styles (at this point) are minimal...so I don't think that's the problem.
My App.xaml:
<Application.Resources>
<ResourceDictionary x:Key="LocalRes">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="telerik:RadButton">
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
</ResourceDictionary>
</Application.Resources>
My Resources.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI Light" />
</Style>
<SolidColorBrush x:Key="WhiteBrush" Color="#FFFFFFFF" />
<Style x:Key="LeftArrowButton" TargetType="controls:RadButton">
<Setter Property="Background" Value="#909090" />
<Setter Property="Width" Value="37" />
<Setter Property="Height" Value="37" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="4 2 5 0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:RadButton">
<Grid x:Name="Root">
<Ellipse x:Name="Ellipse" Width="37" Height="37" StrokeThickness="2" Stroke="#909090" Fill="Transparent" />
<Path x:Name="Arrow" Width="16" Height="16" Data="M1,8 L15,8 M8,1 L1,8 8,15" StrokeThickness="2.5" Stroke="#909090" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Ellipse" Property="Stroke" Value="#3EE800" />
<Setter TargetName="Arrow" Property="Stroke" Value="#3EE800" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RightArrowButton" TargetType="controls:RadButton">
<Setter Property="Background" Value="#909090" />
<Setter Property="Width" Value="37" />
<Setter Property="Height" Value="37" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="4 2 5 0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:RadButton">
<Grid x:Name="Root">
<Ellipse x:Name="Ellipse" Width="37" Height="37" StrokeThickness="2" Stroke="#909090" Fill="Transparent" />
<Path x:Name="Arrow" Width="16" Height="16" Data="M1,8 L15,8 M8,1 L15,8 8,15" StrokeThickness="2.5" Stroke="#909090" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Ellipse" Property="Stroke" Value="#3EE800" />
<Setter TargetName="Arrow" Property="Stroke" Value="#3EE800" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PlusButtonLarge" TargetType="controls:RadButton">
<Setter Property="Background" Value="#909090" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="4 2 5 0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:RadButton">
<Grid x:Name="Root">
<Ellipse x:Name="Ellipse" Width="100" Height="100" StrokeThickness="3" Stroke="#FF9D00" Fill="#FFFFFF" />
<Path x:Name="PlusH" Width="75" Height="14" Data="M1,6 L74,6" StrokeThickness="3.5" Stroke="#FF9D00" />
<Path x:Name="PlusVT" Width="75" Height="75" Data="M37,0 V25,8 8,15" StrokeThickness="3.5" Stroke="#FF9D00" />
<Path x:Name="PlusVB" Width="75" Height="75" Data="M37,0 V75,8 8,15" StrokeThickness="3.5" Stroke="#FF9D00" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Ellipse" Property="Stroke" Value="#3EE800" />
<Setter TargetName="Ellipse" Property="Fill" Value="#939393" />
<Setter TargetName="PlusH" Property="Stroke" Value="#3EE800" />
<Setter TargetName="PlusVT" Property="Stroke" Value="#3EE800" />
<Setter TargetName="PlusVB" Property="Stroke" Value="#3EE800" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
There are no Window.Resources present.
Do you have any suggestions on where to look next?
Thanks,
Mark
Hello Mark,
I have created a sample project using the provided code snippets, in order to reproduce the mentioned behavior, but to no success. The FontWeight property is applied correctly to the labels in the CardHeaderTemplate at my end.
That said, I have attached the mentioned project, so, could you try it out and let me know if I am missing something of importance?
Regards,
Stenly
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Stenly,
I've attached a small sample project that demonstrates the issue.
I'm looking to bold the CardView's header text as indicated in the following lines (in the sample).
<Label Content="{Binding GroupNumber}" ContentStringFormat="{}Group #{0}" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Left" />
<Label Content="{Binding TotalCount}" ContentStringFormat="{}{0} Items(s)" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Right" />
In addition, the FontWeight property seems to be ignored in several areas.
Thanks,
Mark
Hello Stenly,
I figured it out.
The default font only supports the normal weight and style. Once I updated that, all of my weights and styles were applied.
Thanks for all your help. Much appreciated.
-Mark