CardView Header Template Formatting

[The Nimble Coder]

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

[Stenly]

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

[The Nimble Coder]

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

[Stenly]

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

[The Nimble Coder]

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

[The Nimble Coder]

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