Uno 平台 Material 卡片使用 Pathicon

Question

我在基于 Uno 的应用程序上使用 Material 卡片。它工作得很好——除了我试图为 MediaContent 添加一个 Pathicon 并且我无法让它工作。我尝试覆盖模板中的图像源 - 但那没有用 - 我可能没有做对。本质上，我想要一个 .png 或 jpg 所在的 Pathicon。任何有关如何实现此目的的建议将不胜感激。

<material:Card HeaderContent="Outlined card"
               SubHeaderContent="With title and subtitle only"
               MediaContent="" 
               Style="{StaticResource MaterialOutlinedCardStyle}"
               PointerExited="eventPageClick">
            <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.MediaContentTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"
                        Stretch="Uniform"
                        MaxHeight="194" />
                </DataTemplate>
            </material:Card.MediaContentTemplate>
        </material:Card>

Answer 1

好问题！

使用 MediaContentTemplate，您应该能够在 DataTemplate 中放置任何您想要的内容，包括 PathIcon。唯一的问题是 MediaContentTemplate 只有在 MediaContent 属性不是 null 或空字符串时才会加载。所以我会做一些事情，比如将路径数据字符串设置为 MediaContent，然后在 MediaContentTemplate 中使用 Binding 到 PathIcon 的 Data 属性，像这样：

<material:Card HeaderContent="Outlined card"
               SubHeaderContent="With title and subtitle only"
               MediaContent="PASTE PATH DATA HERE" 
               Style="{StaticResource MaterialOutlinedCardStyle}"
               PointerExited="eventPageClick">
    <controls:Card.MediaContentTemplate>
        <DataTemplate>
            <PathIcon Data="{Binding}"/>
        </DataTemplate>
    </controls:Card.MediaContentTemplate>
    ...
</material:Card>

Answer 2

谢谢sbilogan！你给了我让它工作的关键。他们的关键是媒体内容的文本不能为空。事实证明，我可以将任何文本放在那里，然后像下面这样添加 Pathicon，这样就可以了。非常感谢您的帮助！

<material:Card HeaderContent="Outlined card3"
               SubHeaderContent="With title and subtitle only"
               Style="{StaticResource MaterialOutlinedCardStyle}"
               MediaContent="Example"        
               PointerExited="eventPageClick">
            <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.MediaContentTemplate>
                <DataTemplate>
                    <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Data="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
                 </DataTemplate>
            </material:Card.MediaContentTemplate>
        </material:Card>

Uno 平台 Material 卡片使用 Pathicon

Uno Platform Material Card Use Pathicon

material-design

uno-platform