0

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>
bradley plater
  • 1,272
  • 2
  • 9
  • 16
  • Make sure that `Images/Plus.png` is a valid image resource, i.e. that there is a file `Plus.png` in a folder named `Images` in your Visual Studio project, and that its Build Action is set to `Resource`. – Clemens Apr 01 '19 at 17:27
  • All of this is correct and the build action is set to Resource? – bradley plater Apr 01 '19 at 17:35
  • Sorry, TemplateBinding does not perform automatic type conversion from string to ImageSource. Use ``. See also the second answer to the duplicate question. – Clemens Apr 01 '19 at 17:43

0 Answers0