绑定ImageSource在设计时可更改

Question

The problem: I would like to create a button template in XAML where I bind the image source to a content presenter content box or anything similar.

Required parameters for the solution: I understand that for a standard button I'm able to add a stackpanel or grid to the button, insert an image into said container and call it a day. However, I'm not a fan of the windows 'chrome' look nor the blue mouse over, click, and focus effects. What I'm attempting to do is create a new button template (editing a copy of the default button template and removing the chrome container) that has the capability to be a base template with the option of changing images as I add more buttons.

Things I've tried and their results:

<Button x:Name="btn">
    <StackPanel>
        <Image source="imgsource.png"/>
    </StackPanel>
</Button>

Result: Has the button chrome effect. Can be a fall back if nothing else possible but I don't like it.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="bContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
                <Grid x:Name="gBody" Background="#FF3C3C3C"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocused" Value="true"/>
                <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="#ADADAD"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>    

<Button Style="{DynamicResource ButtonStyle}">
    <Grid>
        <Image Source="imgsource.png"/>
    </Grid>
</Button>

Result: The image doesn't show up. I'm thinking this is due to the button custom template, but my knowledge on this is limited so I haven't delved too deep.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="bContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
                <Image x:Name="iImage" Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" Height="16" VerticalAlignment="Top" Width="16"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocused" Value="true"/>
                <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="#ADADAD"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>    

<Button Style="{DynamicResource ButtonStyle}">
    <Grid>
        <Image Source="imgsource.png"/>
    </Grid>
</Button>

Result: The image only shows up when entering the FULL path to the image. I'm not sure if I'm correct, but wouldn't this cause problems when deploying the program?

Answer 1

I'm kind of surprised your third example works - even with the full path. Just at a glance it does not seem like it should work. Your second attempt is close but you do not have a site to bind the button's content to.

Look at your button:

<Button Style="{DynamicResource ButtonStyle}">
    <Grid>
        <Image Source="imgsource.png"/>
    </Grid>
</Button>

The Grid is the Content (the grid is not necessary - you can just put the Image there). Looking at your template you can see there is nothing in there that will pick up the content. Try adding a content presenter to your template:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="bContainer" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                    Height="{TemplateBinding Height}" 
                    VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                    Width="{TemplateBinding Width}">
                <ContentPresenter x:Name="contentPresenter"
                                  Focusable="False"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  Margin="{TemplateBinding Padding}"
                                  RecognizesAccessKey="True"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocused" 
                         Value="true"/>
                <Trigger Property="ToggleButton.IsChecked" 
                         Value="true"/>
                <Trigger Property="IsEnabled" 
                         Value="false">
                    <Setter Property="Foreground" 
                            Value="#ADADAD"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>