StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are two ways to deal with resolution in WPF. </p> <p>One option is to design to a minimum resolution and just make sure everything is docked appropriately so that the elements get larger as the Window resolution gets larger. This is how many people did things in WinForms and still works decently well for WPF. You probably already have some concept of how to deal with this by setting HorizontalAlignment, VerticalAlignment, and margins.</p> <p>The newer, trendier thing to do in WPF that was nearly impossible to do in WinForms is have your application actually just zoom in so your controls get bigger as your Window does. To do this, you'll apply a ScaleTransform on some root element in your Window and let WPF take care of the rest. It's really cool.</p> <p>To show what this is like, here's what a window would look like when you start the app, make it smaller, and make it bigger: <a href="https://i.stack.imgur.com/QeoVK.png" rel="noreferrer">http://i.stack.imgur.com/QeoVK.png</a></p> <p>Here's the code-behind for the small sample app I made:</p> <pre><code>public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } #region ScaleValue Depdency Property public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(MainWindow), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue))); private static object OnCoerceScaleValue(DependencyObject o, object value) { MainWindow mainWindow = o as MainWindow; if (mainWindow != null) return mainWindow.OnCoerceScaleValue((double)value); else return value; } private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e) { MainWindow mainWindow = o as MainWindow; if (mainWindow != null) mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue); } protected virtual double OnCoerceScaleValue(double value) { if (double.IsNaN(value)) return 1.0f; value = Math.Max(0.1, value); return value; } protected virtual void OnScaleValueChanged(double oldValue, double newValue) { } public double ScaleValue { get { return (double)GetValue(ScaleValueProperty); } set { SetValue(ScaleValueProperty, value); } } #endregion private void MainGrid_SizeChanged(object sender, EventArgs e) { CalculateScale(); } private void CalculateScale() { double yScale = ActualHeight / 250f; double xScale = ActualWidth / 200f; double value = Math.Min(xScale, yScale); ScaleValue = (double)OnCoerceScaleValue(myMainWindow, value); } } </code></pre> <p>And the XAML:</p> <pre><code><Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Name="myMainWindow" Width="200" Height="250"> <Grid Name="MainGrid" SizeChanged="MainGrid_SizeChanged"> <Grid.LayoutTransform> <ScaleTransform x:Name="ApplicationScaleTransform" CenterX="0" CenterY="0" ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}" ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" /> </Grid.LayoutTransform> <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150"> <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/> <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/> </Grid> </Grid> </code></pre> <p></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload