I've found so many answers to this questions, but no matter what I try nothing seems to work.
I'm trying to create a UserControl in a UWP Application. The User Control consists of a Border, with an Image and a TextBlock inside of it. I managed to get the TextBlock text to show up, but no matter what I do I can't seem to get an Image to display in the UserControl.
Things tried so far:
I'm at a loss as to how to get this to work. I know I've done this before, but it was several years ago and I've apparently fogotten how (or something significant changed with UWP, as most of my experience is in WPF).
Could someone please help find where I'm messing this up?
UserControl XAML:
<UserControl
x:Class="ShirtSleeves.CardControlxaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShirtSleeves"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="CardControl"
mc:Ignorable="d"
d:DesignHeight="400"
d:DesignWidth="300">
<Grid>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding ElementName=CardControl, Path=Graphic}" Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ElementName=CardControl, Path=Label}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Grid>
</Border>
</Grid>
</UserControl>
UserControl C#:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
namespace ShirtSleeves
{
public sealed partial class CardControlxaml : UserControl
{
//private TextBlock label;
public static DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string),
typeof(CardControlxaml), new PropertyMetadata("Label"));
public static DependencyProperty GraphicProperty = DependencyProperty.Register("Graphic", typeof(string),
typeof(CardControlxaml), new PropertyMetadata(null));
public string Label
{
get { return (string)GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
public string Graphic
{
get { return (string)GetValue(GraphicProperty); }
set { SetValue(GraphicProperty, value); }
}
public CardControlxaml()
{
this.InitializeComponent();
}
}
}
MainPage XAML:
<Page
x:Class="ShirtSleeves.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShirtSleeves"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="1200"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="DarkGreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0">
<StackPanel>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<TextBlock Text="Games" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Border>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<TextBlock Text="Sleeves" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Border>
<local:CardControlxaml Label="Search" Graphic="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" Foreground="Black" />
<Image Height="250" Source="C:\\Users\\<username>\\source\\repos\\ShirtSleeves\\ShirtSleeves\\Images\\Rook (Games).png" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</ScrollViewer>
<Viewbox Grid.Column="1">
<Image Source="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" VerticalAlignment="Top" HorizontalAlignment="Center" />
</Viewbox>
</Grid>
</Page>
UWP doesn't allow to access files outside the app container directly. This means that you could not set the image source like this C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png
.
In your case, the simplest way is to put the image into your project's Assets folder like the following:
Then, you could specify the 'Graphic' property like this:
<local:CardControlxaml Label="Search" Graphic="Assets/animals.jpg" Foreground="Black" />
More information, please read File access permissions.