Search code examples
material-uiuno-platform

Uno Platform Material Card


I am trying to use the card from the Material design that Uno has added. However- when I followed the example- the card would not appear. I am using the bottomNavigationBar from Material elsewhere in the app and it is working fine. As a note- I saw one example with Header and one with HeaderContent. I have tried both and neither worked. Nothing is displayed at all- IOS or Android. What am I missing? Thanks for your help!

<Page
    x:Class="sampleApp.Shared.Views.appCardPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:sampleApp.Shared.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:material="using:Uno.Material.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel Orientation="Vertical" Background="{StaticResource SubPageBackground}" >

        <material:Card HeaderContent="Outlined card"
           SubHeaderContent="With title and subitle"
           Style="{StaticResource MaterialOutlinedCardStyle}" />
        
    </StackPanel>
</Page>

Solution

  • Try like this

    <material:Card HeaderContent="Outlined card"
                   SubHeaderContent="With title and subtitle only"
                   Style="{StaticResource MaterialOutlinedCardStyle}">
       <material:Card.HeaderContentTemplate>
          <DataTemplate>
             <TextBlock Text="{Binding}"
                        Margin="16,14,16,0"
                        Style="{ThemeResource MaterialHeadline6}" />
          </DataTemplate>
       </material:Card.HeaderContentTemplate>
       <material:Card.SubHeaderContentTemplate>
          <DataTemplate>
             <TextBlock Text="{Binding}"
                        Margin="16,0,16,14"
                        Style="{ThemeResource MaterialBody2}" />
          </DataTemplate>
       </material:Card.SubHeaderContentTemplate>
    </material:Card>
    

    It seems HeaderContentTemplate and SubHeaderContentTemplate don't have a default value in the MaterialOutlinedCardStyle style, that could be improved.