Uno平台材料卡使用Pathicon

Question

我在基於 Uno 的應用程序上使用了 Material Card。 它工作得很好——除了我試圖為 MediaContent 添加一個 Pathicon 並且無法讓它工作。 我嘗試覆蓋模板中的圖像源——但這沒有用——我可能沒有做對。 本質上我想要一個Pathicon，其中.png或jpg會是go。 任何有關如何實現此目的的建議將不勝感激。

<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 。 只有當MediaContent屬性不是null或空字符串時才會加載MediaContentTemplate 。 所以我會做一些事情，比如將 Path Data 字符串設置為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

謝謝你。 你給了我讓它工作的鑰匙。 他們的關鍵是媒體內容的文本不能為空。 事實證明，我可以將任何文本放在那里，然后像下面那樣添加 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>