Uno Platform Material Card Use Pathicon

user_12628951 0
Viewed 67

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

Great question!

Using the MediaContentTemplate, you should be able to place anything that you want in the DataTemplate, including PathIcons. 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>
user_37457250

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