Uno平台材料卡

时间:2021-03-13 17:37:56

标签: material-ui uno-platform

我正在尝试使用 Uno 添加的 Material design 中的卡片。但是-当我按照示例进行操作时-卡片不会出现。我在应用程序的其他地方使用 Material 中的底部导航栏,它工作正常。作为说明 - 我看到了一个带有 Header 的示例和一个带有 HeaderContent 的示例。我都试过,都没有奏效。根本没有显示任何内容 - IOS 或 Android。我错过了什么?感谢您的帮助!

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

2 个答案:

答案 0 :(得分:0)

试试这个

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

似乎 HeaderContentTemplateSubHeaderContentTemplateMaterialOutlinedCardStyle 样式中没有默认值,可以改进。

答案 1 :(得分:0)

所以我做了一些进一步的测试 - 结果在我的 app.xaml.cs 中我没有正确初始化材料主题。我将其更改为此处找到的示例中的内容:Uno Material Documentation

在第 3 节中。真正有趣的是我在 Material 中使用的底部导航栏尽管如此仍然有效。希望这能帮助其他有类似问题的人。

相关问题