无法分配给属性“Windows.UI.Xaml.Controls.ContentControl.Content”

Question

In my windows 10 app I want to set button content from a resource file. In the designer the vector image from the resource file is visible. But in runtime the following exception occurs: An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in Demo.UI.W10.exe but was not handled in user code WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 15 Position: 17] Additional information: The text associated with this error code could not be found.

This is my resourche dictionary Icons.xaml wich holds the vector image in the Viewbox control with the key WiFi:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Wifi">
    <Grid Width="48" Height="48" Visibility="Visible">
        <Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">                
        </Path>
    </Grid>
</Viewbox>

This is my App.xaml where I add the Icons.xaml resource file in the MergedDictionaries:

<Application
x:Class="Demo.UI.W10.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10"
RequestedTheme="Light">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Assets/Icons.xaml"/>
            <ResourceDictionary Source="Assets/Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

In my mvvmcross page I use the vector image WiFi from the resource file to set the button content.

<views:MvxWindowsPage
x:Class="Demo.UI.W10.Views.ConnectionView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Demo.Core.ViewModels"
xmlns:views="using:Cirrious.MvvmCross.WindowsUWP.Views"
mc:Ignorable="d">
<Page.Resources>
    <vm:ConnectionViewModel x:Key="ViewModel"/>
</Page.Resources>
<Grid>
    <Button Content="{StaticResource Wifi}" Command="{Binding DemoCommand, Source={StaticResource ViewModel}}" Style="{StaticResource BtnMenuStyle}"/>
</Grid>

How can I use the vector image from the resource dictionary as button content?

Answer 1

You can do placing the resources inside a DataTemplate:

 <DataTemplate x:Key="Wifi">
        <Viewbox >
            <Grid Width="48" Height="48" Visibility="Visible">
                <Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
                </Path>
            </Grid>
        </Viewbox>
    </DataTemplate>

And now simply

<Button ContentTemplate="{StaticResource Wifi}"/>

You can use it as many times you need.