Uno平台材料卡使用Pathicon

Question

I am using a Material Card on my Uno based app. It works great- except I am trying to add a Pathicon for MediaContent and am having trouble getting it to work. I tried overriding the Image source in the template- but that did not work- I may not have done that right. Essentially I want a Pathicon where the.png or jpg would go. Any suggestions on how to accomplish this would be appreciated.

<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

Great question!

Using the MediaContentTemplate , you should be able to place anything that you want in the DataTemplate , including PathIcon s. Only thing is that the MediaContentTemplate will only be loaded if the MediaContent property is not null or an empty string. So I would do something like setting the the Path Data string to MediaContent and then use a Binding in the MediaContentTemplate to the PathIcon 's Data property, like so:

<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

Thank you sbilogan. You gave me the key to getting it working. They key was the text cant be empty for Media Content. It turns out I can put any text there and then add the Pathicon like below and that works. Thank you so much for your help!

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