user1394252
Reputation: 41
How to make wpf application window resize properly?
I have created the home screen of fixed size for some application as shown in code below. The problem is that when I change the size of the window, or if I run it with maximized window, everything gets messed up and overlapped.
<Window x:Class="Mastersolution.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="700" Width="1000" WindowStyle="None" WindowStartupLocation="Manual" Left="0" Top="0">
<Grid Background = "Cyan" >
<TextBox Name="ButtonDescription" Text="" Margin="329,438,319,163" />
<!-- import button -->
<Button Name ="Btn_Import" Margin="120,260,757,330" Click="Btn_Import_Click" MouseEnter="import_desc" MouseLeave="desc_clear" >
<Setter Property="Button.IsEnabled" Value="False" />
<Button.Template>
<ControlTemplate>
<Grid x:Name="bg">
<Image Name ="import_image" Source="/Images/Import.png"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- hover effect -->
<Setter TargetName="bg" Property="Background" Value="Gray" />
</Trigger>
<Trigger Property="Button.IsPressed" Value ="True">
<!-- press effect -->
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.Style>
<!-- initially disabled-->
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Button.Style>
<!-- fade effect while disabled-->
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.3" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
<Label Name ="ImportLabel" Content="IMPORT" Margin="133,367,757,287" FontSize="20"/>
<!-- studio button -->
<Button Name ="Studio" Margin="310,251,535,330" Click="Studio_Click" MouseEnter="studio_desc" MouseLeave="desc_clear">
<Button.Template>
<ControlTemplate>
<Grid x:Name="bg">
<Image Source="/Images/Studio.png"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bg" Property="Background" Value="Gray" />
</Trigger>
<Trigger Property="Button.IsPressed" Value ="True">
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.Style>
<!-- initially disabled-->
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Button.Style>
<!-- fade effect while disabled-->
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.3" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
<Label Name ="StudioLabel" Content="STUDIO" Margin="346,367,555,287" FontSize="20"/>
<!-- animation button -->
<Button Name ="Animation" Margin="556,260,338,330" Click="Animation_Click" MouseEnter="animation_desc" MouseLeave="desc_clear">
<Button.Template>
<ControlTemplate>
<Grid x:Name="bg">
<Image Source="/Images/Animation.jpg"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bg" Property="Background" Value="Gray" />
</Trigger>
<Trigger Property="Button.IsPressed" Value ="True">
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.Style>
<!-- initially disabled-->
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Button.Style>
<!-- fade effect while disabled-->
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.3" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
<Label Name ="AnimationLabel" Content="ANIMATION" Margin="544,367,319,287" FontSize="20"/>
<!-- record button -->
<Button Name ="Record" Margin="758,251,88,330" Click="Record_Click" MouseEnter="record_desc" MouseLeave="desc_clear">
<Button.Template>
<ControlTemplate>
<Grid x:Name="bg">
<Image Source="/Images/Record.png"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bg" Property="Background" Value="Gray" />
</Trigger>
<Trigger Property="Button.IsPressed" Value ="True">
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.Style>
<!-- initially disabled-->
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Button.Style>
<!-- fade effect while disabled-->
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.3" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
<Label Name ="RecordLabel" Content="RECORD" Margin="785,367,112,287" FontSize="20"/>
<!-- quit button -->
<Button Name ="Quit" Margin="931,631,10,27" Click="Quit_Click">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/Quit.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="QuitLabel" Content="QUIT" Margin="940,661,0,0" FontSize="10"/>
<!-- info button -->
<Button Name ="Info" Margin="880,631,61,27" Click="Info_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Images/Info.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="InfoLabel" Content="INFO" Margin="889,661,61,0" FontSize="10"/>
<!-- browse button -->
<Button Name ="Browse" Margin="829,631,112,27" Click="Browse_Click">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/Browse.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="BrowseLabel" Content="BROWSE" Margin="828,661,108,0" FontSize="10"/>
<!-- save button -->
<Button Name ="Save" Margin="778,631,163,27" Click="Save_Click">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/Save.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="SaveLabel" Content="SAVE" Margin="786,661,163,-11" FontSize="10"/>
<!-- open button -->
<Button Name ="Open" Margin="727,631,214,27" Click="Open_Click">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/Open.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="OpenLabel" Content="OPEN" Margin="731,661,211,0" FontSize="10"/>
<!-- new button -->
<Button Name ="New" Margin="676,631,265,27" Click="New_Click">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/NewProject.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
<Label Name ="NewLabel" Content="NEW" Margin="685,661,257,0" FontSize="10"/>
<!-- hamburger button -->
<Button Name ="hamburger" Margin="836,501,10,80" MouseEnter="hamburger_Click">
<Button.Template>
<ControlTemplate>
<Grid x:Name="bg">
<Image Source="/Images/Hamburger.png"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bg" Property="Background" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Label Content="MAIN MENU" Margin="836,580,-27,67" FontSize="25"/>
</Grid>
<!--************************************************************************* MAIN SCREEN END***************************************************************************************-->
<!--************************************************************************* IMPORT SCREEN 1st page ***************************************************************************************-->
<Grid Name="IMPORT_SCREEN_1st_page">
<Grid.Style>
<!-- initially hidden-->
<Style TargetType="Grid">
<Setter Property="Visibility" Value="Hidden" />
</Style>
</Grid.Style>
<!--tree view file selection-->
<Menu Name ="SelectFileMenu" Margin="310,220,145,287" >
<!-- file selection box-->
<ComboBox Width="518" Height="26" />
</Menu>
<!-- windows dialog box (temporarily)-->
<Button Name ="open_file" Margin="140,438,801,220" Click="Open_Win_Dialog">
<Button.Template>
<ControlTemplate>
<Image Source="/Images/open_temp.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
I would appreciate some help.
Upvotes: 0
Views: 1846
Answers (2)
Theodosius Von Richthofen
Reputation: 2469
Don't use MARGIN to make things where they are supposed to be! Your Margin property in each of your controls is setting an absolute position for your buttons etc. This obviously won't do when you change the size of the window. You need relative spacing.
Since you are using <Grid>, set some RowDefinitions and ColumnDefinitions to make controls appear where they are supposed to, and sized accordingly. See this for starters:
http://www.wpftutorial.net/LayoutProperties.html
ie.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="OK" Grid.Row="1" />
</Grid>
This will make 3 rows, the bottom and top rows will proportionally fill your window, and the Auto height of the middle row would size to fit the height of the button. This would mean the button would be in the middle of the screen, always, no matter the windows size. This is much better than trying to use Margin="279,345,100,208" or whatever to put the button where you want it, because as soon as the window changes, that Margin will force it to not be in the same spot, relatively.
Upvotes: 2
Mike Eason
Reputation: 9723
It is good practice to only use Margin in the context of relative positioning. Using this will allow your controls to be dynamically positioned when the window changes it's size.
Currently, your margins look like this:
Margin="329,438,319,163"
This is like saying: "Put the control here, and keep it there".
Whereas, they should be relative to the parent control. Instead of a straightforward defined margin.
Something a little more like this:
Margin="12"
Which would be like saying: "Set the margin to be 12 on all sides within the parent control, if the parent resizes, then resize this control too".
Upvotes: 0
Related Questions
- Resize WPF Window and contents depening on screen resolution
- How to resize C# WPF Program to fit any screen resolution
- Unity window inside WPF application (XAML) not resizing
- WPF window smaller than defined in XAML
- Resizing wpf window programmatically in c#
- How do I force my window to re-size?
- Window does not resize properly when moved to larger display
- WPF Fit window size
- WPF Window size Issues
- In WPF how do I Resize main windows during the runtime