Question

I have a WPF application I’m working on and the form is being built using images…I’ve run into a problem though with resizing the form.

The issue is that for the individual row backgrounds at the top I need to keep the height at a fixed size, while allowing the width to resize to fit the window…However any time I try to put a height or max height value or anything like that the image control stops fitting the window entirely.

Now I may be going about this entirely the wrong way as I’m newish to WPF so if anyone has a better way of doing this please let me know.

This is the XAML I’m using so far, the issue is with the TitleBarImage:

<Window x:Class="App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Application" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" AllowsTransparency="True" WindowStyle="None" MinWidth="1024" MinHeight="749" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Image x:Name="TitleBarImage" Grid.Row="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Top" Source="skin/title-bar.png" MouseLeftButtonDown="TitleBarImage_MouseLeftButtonDown" MouseDown="TitleBarImage_MouseDoubleClick"/>
        <Image HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2" Height="23" Margin="0,17,74,0" VerticalAlignment="Top" Width="34" Source="skin/min-button.png" MouseLeftButtonUp="MinImage_MouseLeftButtonUp"/>
        <Image HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2" Height="23" Margin="0,17,40,0" VerticalAlignment="Top" Width="34" Source="skin/max-button.png" MouseLeftButtonUp="MaxImage_MouseLeftButtonUp"/>
        <Image HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2" Height="23" Margin="0,17,7,0" VerticalAlignment="Top" Width="33" Source="skin/close-button.png" MouseLeftButtonUp="Image_MouseLeftButtonUp_1" RenderTransformOrigin="21.121,-4.522"/>
    </Grid>
</Window>

Answer 1

You need to set the Stretch property on your image to Fill, otherwise it will keep its original aspect ratio and won’t fit the area properly.

<Image ... Stretch="Fill"/>