Uno Platform Material Card

user_12628951 0
Viewed 185

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>
uno-platform material-ui
2 Answers

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.

user_7780660

So I did some further testing- and it turns out in my app.xaml.cs I was not initializing the material theme correctly. I changed it to what is in the example found here: Uno Material Documentation

In section 3. What was really interesting is the bottomNavigationBar I use from Material worked in spite of all of this. Hopefully this will help someone else that has a similar issue.

user_126289510
Related