Im trying to create a simple log in window using WPF, rather than using buttons i am planning on using small images as the way the user would submit the credentials. However I am struggling to use a placeholder in order to make this happen. The code is below.
<Window x:Class="LogIn.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LogIn"
mc:Ignorable="d"
Title="Log In" Height="330" Width="300" FontSize="14" Background="#04c582"
Icon="Images/Icon.ico">
<Border Background="#2e3137" CornerRadius="20" Margin="20">
<StackPanel Margin="20">
<Label Content="Login" Foreground="White" FontSize="25" HorizontalAlignment="Center"/>
<Separator/>
<!--Username-->
<Label Content="Username" Foreground="White"/>
<TextBox Name="UsernameTextbox" Background="#545d5a" Foreground="White" FontSize="18"/>
<!--Password-->
<Label Content="Password" Foreground="White"/>
<PasswordBox Name="PasswordTextbox" Background="#545d5a" Foreground="White" FontSize="18"/>
<!--Buttons for Window-->
<Border Padding="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ControlTemplate x:Key="LogInButton">
<Grid Width="AUTO" Height="AUTO">
<Image Source="{TemplateBinding Tag}"></Image>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource LogInButton}" Height="50" Width="50" Tag="Images/Plus.png"/>
</Grid>
</Border>
</StackPanel>
</Border>
</Window>
The section of code I am having the issue with:
<!--Buttons for Window-->
<Border Padding="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ControlTemplate x:Key="LogInButton">
<Grid Width="AUTO" Height="AUTO">
<Image Source="{TemplateBinding Tag}"></Image>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource LogInButton}" Height="50" Width="50" Tag="Images/Plus.png"/>
</Grid>
</Border>
Whilst doing research into the issue i saw a thread which told me to use aTemplateBinding
however it doesn't show the image. Any Suggestions?
Edit:
<Border Padding="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ControlTemplate x:Key="LogInButton">
<Grid Width="AUTO" Height="AUTO">
<Image Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource LogInButton}" Height="50" Width="50" Tag="Images/Login.png"/>
</Grid>
</Border>
</StackPanel>
</Border>