Question

I’m modifying the default ‘ChildWindow’ style and I’d like to specify a different image than the ‘X’ that is there by default. I’ve tried various things, like hooking into the OnApplyTemplate and OnOpened, where I can gain programmatic access to the button, like this:

Button closeButton = this.GetTemplateChild("CloseButton") as Button;

Yet closeButton.Content is always null. I’ve tried setting this to my Image and it does get set, yet the UI still displays the default ‘X’. I’ve called UpdateLayout() as well to no avail.

Is there a way to do this either programmatically or via XAML? I’ve copied the default style and have made changes that are affected, yet this is one change that has me stumped. Below is a snippet of the style XAML I’ve been working with:

<!-- Header with Title-->
<Border x:Name="Chrome" Width="Auto" CornerRadius="5,5,0,0" Background="{StaticResource ChildWindowHeaderBackgroundBrush}">
    <Grid Height="Auto" Width="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <ContentControl Content="{TemplateBinding Title}"
            IsTabStop="False"
            FontWeight="Bold"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Margin="6,0,6,0"/>    
        <Button x:Name="CloseButton" Margin="0,5,0,5" Grid.Column="2" IsTabStop="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="14" Style="{StaticResource ButtonStyle}"/>
    </Grid>
</Border>

I’ve added an Image to the Button via XAML and it still doesn’t show up.

Answer 1

It’s all handled via the style, in a ControlTemplate:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                      <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled"/>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed"/>
                        <VisualState x:Name="MouseOver">
                          <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
                              <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                  <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                              </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage">
                              <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                  <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                              </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                        </VisualState>
                      </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="normalImage" Margin="0" Source="/img/status_unknown.png" Stretch="None" />
                    <Image x:Name="mouseOverImage" Margin="0" Source="/img/up.png" Stretch="None" Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>