WPF布局在设计和运行时之间的差异

时间:2014-09-11 11:30:35

标签: c# wpf layout

我使用this question的答案作为构建我正在构建的应用程序的基础。

在设计模式下看起来都很好,我得到以下结果:

Design

但是在运行时我的内容比我的内容有很大差距,在这种情况下是MediaElement

Runtime

我的MainWindow的代码是:

<local:MyWindow x:Class="DebriefSuite.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DebriefSuite"        
        Height="439.091" Width="600" 
        Style="{DynamicResource MyWindowStyle}"
        WindowStyle="None">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="6*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0" Grid.Column="0">
            <MediaElement Name="meVideo" Height="Auto" Width="Auto" IsMuted="True"/>
        </Grid>        
    </Grid>
</local:MyWindow>

我的App.xaml中的代码资源代码与链接的问题相同,但无论如何我都会包含它:

<Application.Resources>
    <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter"/>

    <Color x:Key="WindowBackgroundColor">#FF2D2D30</Color>
    <Color x:Key="HighlightColor">#FF3F3F41</Color>
    <Color x:Key="BlueColor">#FF007ACC</Color>
    <Color x:Key="ForegroundColor">#FFF4F4F5</Color>

    <SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource WindowBackgroundColor}"/>
    <SolidColorBrush x:Key="HighlightColorBrush" Color="{StaticResource HighlightColor}"/>
    <SolidColorBrush x:Key="BlueColorBrush" Color="{StaticResource BlueColor}"/>
    <SolidColorBrush x:Key="ForegroundColorBrush" Color="{StaticResource ForegroundColor}"/>

    <Style x:Key="WindowButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="contentPresenter"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                      Margin="{TemplateBinding Padding}"
                      RecognizesAccessKey="True"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource HighlightColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{DynamicResource BlueColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="contentPresenter" Property="Opacity" Value=".5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MyWindowStyle" TargetType="local:MyWindow">
        <Setter Property="Icon" Value="Icon.ico"/>
        <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}"/>
        <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
        <Setter Property="ResizeMode" Value="CanResizeWithGrip"/>
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyWindow">
                    <Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}" Background="{StaticResource WindowBackgroundColorBrush}">
                        <Grid>
                            <Border BorderThickness="1">
                                <AdornerDecorator>
                                    <Grid x:Name="LayoutRoot">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="15"/>
                                        </Grid.RowDefinitions>
                                        <ContentPresenter Grid.Row="1" Grid.RowSpan="2" Margin="7"/>
                                        <Rectangle x:Name="HeaderBackground" Height="25" Fill="{DynamicResource WindowBackgroundColorBrush}" VerticalAlignment="Top" Grid.Row="0"/>
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
                                            <Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                        <Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                    Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"/>
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                            <Grid Margin="1,0,1,0">
                                                <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
                                                    <Button.Content>
                                                        <Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
                                                            <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1"/>
                                                        </Grid>
                                                    </Button.Content>
                                                </Button>
                                                <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
                                                    <Button.Content>
                                                        <Grid Width="31" Height="25">
                                                            <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"/>
                                                        </Grid>
                                                    </Button.Content>
                                                </Button>
                                            </Grid>
                                            <Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close"  Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                        <Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                    Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5"/>
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                        </StackPanel>
                                        <!--<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
                                            <Image Source="Icon.ico"/>
                                            <TextBlock x:Name="WindowTitleTextBlock" Grid.Row="0" Text="{TemplateBinding Title}" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"  Margin="8 -1 0 0"  FontSize="14"  Foreground="{TemplateBinding Foreground}"/>
                                        </StackPanel>-->
                                        <Grid Grid.Row="2">
                                            <Path x:Name="ResizeGrip" Visibility="Collapsed" Width="12" Height="12" Margin="1" HorizontalAlignment="Right"
                                    Stroke="{StaticResource BlueColorBrush}" StrokeThickness="1" Stretch="None" Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3"/>
                                        </Grid>
                                    </Grid>
                                </AdornerDecorator>
                            </Border>
                            <Border BorderBrush="{StaticResource BlueColorBrush}" BorderThickness="1" Visibility="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource bool2VisibilityConverter}}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="WindowState" Value="Maximized">
                            <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="Restore" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="LayoutRoot" Property="Margin" Value="7"/>
                        </Trigger>
                        <Trigger Property="WindowState" Value="Normal">
                            <Setter TargetName="Maximize" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="Restore" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
                                <Condition Property="WindowState" Value="Normal"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False"/>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

有人能指出我正确的方向,这种格式差异来自何处?

非常感谢。

1 个答案:

答案 0 :(得分:1)

你看到这个盒子填满了设计中更大的空间,因为这是MediaElement可以占用的最大尺寸。但是您的实际图像小于为MediaElement控件分配的大小,因此它在运行时看起来更小。

因此,如果您希望图像填满空间,请尝试根据需要使用其stretch属性。例如,请参阅此处:MediaElement.Stretch Property