CardView Header Template Formatting

4 Answers 29 Views
CardView
The Nimble Coder
Top achievements
Rank 1
Iron
The Nimble Coder asked on 28 Oct 2021, 03:08 PM | edited on 28 Oct 2021, 03:09 PM

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

Sort by
0
Stenly
Telerik team
answered on 02 Nov 2021, 01:49 PM

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

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
0
The Nimble Coder
Top achievements
Rank 1
Iron
answered on 03 Nov 2021, 03:01 AM

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

0
Stenly
Telerik team
answered on 05 Nov 2021, 03:50 PM

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/.

The Nimble Coder
Top achievements
Rank 1
Iron
commented on 06 Nov 2021, 09:19 PM

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

0
The Nimble Coder
Top achievements
Rank 1
Iron
answered on 07 Nov 2021, 01:32 PM

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

Tags
CardView
Asked by
The Nimble Coder
Top achievements
Rank 1
Iron
Answers by
Stenly
Telerik team
The Nimble Coder
Top achievements
Rank 1
Iron
Share this question
or