CODEWITHSUNDEEP
xaml
Steve Gaines
Steve Gaines

Reputation: 601

WPF Button Image Disappears At Runtime

I have written the user control below and I want to display a clock image on the button control. The image has BuildAction set to Resource. It shows up perfect in the XAML design screen, but when I run the application the button is blank. What am I doing wrong?

<UserControl x:Class="App_Process_Admin.User_Controls.TimePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="30" d:DesignWidth="150">
    <UserControl.Resources>
        <ResourceDictionary>
            <Image x:Key="ClockImage" Source="Icons/Clock.png"/>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="180" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="20*" />
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0" Name="TimeField" Text="" />
        <Button Grid.Row="0" Grid.Column="1" Content="{StaticResource ClockImage}" Click="SetTime_Click" />
        <local:ClockPopUp x:Name="ClockPopUp1" Grid.Row="1" Grid.Column="0" Visibility="Hidden"></local:ClockPopUp>
    </Grid>
</UserControl>

Upvotes: 1

Views: 3322

Answers (3)

Dimalungma
Dimalungma

Reputation: 1

In my case, it was needed to first add the images into project, by drag-and-drop'ing them into the folder where your .xaml is in solution explorer.

Then, i added to .xaml:

<Window.Resources>
    <BitmapImage x:Key="Icon" UriSource="Images/Image.png"/>
</Window.Resources>

<Button x:Name="SomeButton" Background="Gray">
            <Image Source="{StaticResource Icon}"/>
</Button>

And that's it.

Also, if you have complicated project with many folders, you can use ../ in UriSource to go up a folder from the current, where .xaml file is located

Upvotes: 0

S nargol
S nargol

Reputation: 41

I had the same problem, i resolve it this way (in visual studio 2019, wpf application) :

  • put your images in your project in a folder
  • Create an image in xaml and put your source At this point for me the images are displayed in the design window but not at the runetime
  • Access to your image in your project with the solution explorer
  • Select each image and open the property window
  • Set "Generation action" to "Resource" and "Copy in the repository" To "always copy"

I have done that and i can see my images at runtime :)

PS : sorry for my english, i'm french

Upvotes: 4

Athari
Athari

Reputation: 34293

Image is a control. If you add it to resources his way, it'll only be displayed in the last place it's added to and will disappear from all previous places. You can fix this by adding x:Shared=False:

<Image x:Key="ClockImage" x:Shared="False" Source="Icons/Clock.png"/>

This way, a new Image control will be created every time it's requested.

Alternatively, you can create a button style with Image in its ContentTemplate and add BitmapImage to the resources directly:

<BitmapImage x:Key="Bitmap" UriSource="Icons/Clock.png"/>

<Style x:Key="ButtonImage" TargetType="Button">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{TemplateBinding Content}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now you can create buttons with images this way:

<Button Content="{StaticResource Bitmap}" Style="{StaticResource ButtonImage}"/>

Image controls will be created by the framework based on the template.

Upvotes: 2

Related Questions