CODEWITHSUNDEEP
wpfimagebutton
Avi
Avi

Reputation: 68

WPF button with image user control in design mode

i made a simple usercontrol like this, to support image and text inside button:

<UserControl x:Class="wpf_Templates.UC.rb"
         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" 
         DataContext="{Binding RelativeSource={RelativeSource Self}}" >
<Grid>
    <Button Name="rbutton1">
        <StackPanel Orientation="{Binding Layout}" Background="Beige">
            <Image Source="{Binding Image}" />
            <TextBlock Text="{Binding Text}" Margin="3,3,0,0" HorizontalAlignment="Center"/>
        </StackPanel>

    </Button>
</Grid>

it has two DependencyProperty : Text , Image.

in the MainWindow.xaml i instantiate it like this

 <lcl:rb Text="Rb" Image="Resources\Images\Exit.gif" MinWidth="40"></lcl:rb>

now when the application run , i do see the button with text and image, but i see empty frame in Design mode. why ?

thanks, Avi.

Upvotes: 0

Views: 871

Answers (2)

ΩmegaMan
ΩmegaMan

Reputation: 31686

In design time the pathing is a little different because it is localized to the page.

If the user control is in a sub directory folder, binding to the path Resources\Images\Exit.gif would fail because the designer is in the control directory that doesn't have a Resources subfolder.

If you add ..\ the path to signify the access from a subfolder, as a test, to ..\Resources\Images\Exit.gif, it may get it to work in design mode for the page, but possibly fail during runtime.

Regardless you can decide how to work with the image in design mode.

Upvotes: 1

mathieu
mathieu

Reputation: 31202

You can add the following attributes to the Window declaration in MainWindow.xaml :

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"

And in the declaration of your control :

<lcl:rb Text="Rb" 
        Image="Resources\Images\Exit.gif" 
        d:Image="Resources\Images\Exit.gif"  
        MinWidth="40">
</lcl:rb>

This way the designer knows what to use.

Upvotes: 0

Related Questions