Enato
Enato

Reputation: 25

C# WPF Layout problem (Difference between design and runtime)

I'm having trouble with design my apps on C# WPF because the design mode doesn't equal when I run the app.

If I run the app on windows 10 I get the difference like the image I attach (Button that says "CANCELAR"), but if I run on windows 2000 server it runs like design mode. Left - Runtime | Right - Design mode

My code:

<Window x:Class="Cozinha_V2.TakeAway"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Cozinha_V2"
    mc:Ignorable="d"
    Title="TakeAway" Height="320" MaxHeight="320" MinHeight="320" Width="470" MinWidth="470" MaxWidth="470" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" ShowInTaskbar="False" SizeToContent="WidthAndHeight">
<Window.Resources>
    <ControlTemplate x:Key="ButtonBaseControlTemplateSemOver" TargetType="{x:Type ButtonBase}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsDefaulted" Value="True">
                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            </Trigger>
            <!--<Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
            </Trigger>-->
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                <Setter Property="Foreground" Value="#FF838383"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition Height="55" />
        <RowDefinition Height="*" />
        <RowDefinition Height="55" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="157" />
        <ColumnDefinition Width="60" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="60" />
        <ColumnDefinition Width="157" />
    </Grid.ColumnDefinitions>
    <Button x:Name="btnHorasMais"  Grid.Row="1" Grid.Column="0" Content="+" FontSize="40" MaxWidth="42" HorizontalAlignment="Right" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnHorasMais_Click"/>
    <Button x:Name="btnHorasMenos" Grid.Row="3" Grid.Column="0" Content="-" FontSize="40" MinWidth="30" HorizontalAlignment="Right" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnHorasMenos_Click"/>

    <Label  x:Name="Horas"      Grid.Row="2" Grid.Column="1" Content="00" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>
    <Label  x:Name="separador"  Grid.Row="2" Grid.Column="2" Content=":"  FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>
    <Label  x:Name="Minutos"    Grid.Row="2" Grid.Column="3" Content="00" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>

    <Button x:Name="btnMinutosMais"  Grid.Row="1" Grid.Column="4" Content="+" FontSize="40" MaxWidth="42" HorizontalAlignment="Left" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnMinutosMais_Click"/>
    <Button x:Name="btnMinutosMenos" Grid.Row="3" Grid.Column="4" Content="-" FontSize="40" MinWidth="32" HorizontalAlignment="Left" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnMinutosMenos_Click"/>

    <Button x:Name="novoPedido"   Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" MinHeight="105" Content="IMPRIMIR" FontSize="20" FontWeight="Bold" Margin="3" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="novoPedido_Click"/>
    <Button x:Name="sair"         Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="4" MinHeight="105" Content="CANCELAR" FontSize="20" FontWeight="Bold" Margin="3" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="sair_Click" />
</Grid>

Upvotes: 0

Views: 282

Answers (1)

ASh
ASh

Reputation: 35646

You have fixed Window width and ColumnDefinitions width. But window layout depends on OS and OS themes/settings, so window area available for content can be different.

Allow two largest columns take all remaining width by using * width setting:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="60" />
    <ColumnDefinition Width="30" />
    <ColumnDefinition Width="60" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

Upvotes: 2

Related Questions