如何使WPF窗口响应

时间:2014-07-23 11:37:33

标签: c# wpf visual-studio user-interface expression-blend

我正在使用Blend Expression,刚开始使用WPF。

我试图创建一个窗口响应窗口,它可以容纳多个网格,并根据窗口大小重新调整大小到最小宽度。

就像:

enter image description here

我的代码:

<Window x:Class="Blend.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" WindowState="Maximized">
<Grid>
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
                Padding="5" HorizontalAlignment="Left" Margin="20,10,0,0" 
                VerticalAlignment="Top" Height="211.5" Width="484.5">
<Grid Background="#FFEDF3F8">

</Grid>
</Border>
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="523.333,10,16.334,283.5">
    <Grid Background="#FFEDF3F8"/>
</Border>
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,234,16.334,144">
    <Grid Background="#FFEDF3F8"/>
</Border>
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,372,16.334,31.5">
    <Grid Background="#FFEDF3F8"/>
</Border>
<Button Content="Button" HorizontalAlignment="Left" Margin="626.833,478.5,0,0"
 VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="693.166,478.5,0,0" 
VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
</Grid>
</Window>

我在这里试了两件事一件是Margin而另一件是使用&#39;对齐&#39;使用WidthHeight

不确定哪个会解决我的目的,其次会响应屏幕大小。

我使用*阅读动态网格,但这似乎不起作用。

谢谢,

2 个答案:

答案 0 :(得分:22)

您没有以正确的方式使用网格。

WPF网格有一个允许设置列和行的属性。然后,您将把元素放在网格中并设置它们应该去的行/列。

当然,您可以在网格内部使用网格等等。

然后你可以使用Width =“2 *”等类似的东西来制作比其他更大或更小的列,“相应地”。

下面的代码应该为您提供与您尝试实现的“类似”的内容。

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"
          Grid.Column="0"
          Background="Red" />

    <Grid Grid.Row="0"
          Grid.Column="1"
          Background="Blue" />

    <Grid Grid.Row="1"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Violet" />

    <Grid Grid.Row="2"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Green" />

    <StackPanel Grid.Row="3"
                Grid.ColumnSpan="2"
                Orientation="Horizontal">
         <Button>OK</Button>
         <Button>Cancel</Button>
    </StackPanel>
</Grid>

您可以使用“*”和“自动”来表示列和行的宽度和高度,“*”始终定义为当前窗口宽度或高度的“百分比”。如果您有一列带有“*”而另一列带有“2 *”,则带有“2 *”的列将是仅带有“*”的列的两倍,这将使2/3 1/3分离。

“自动”意味着它将采用“允许显示列内部的较小宽度或高度”。

答案 1 :(得分:0)

您可以将使用示例的多列和多行用作引导程序 您可以使用grid.row或gird.column属性定义新控件。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
    <Button Content="Button" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
</Grid>