0

2 つの行の下部が常に表示されるように修正するレイアウトを構築しようとしています。問題は、一番下の行のコンテンツを一番上に配置する必要があるため、ドックパネルの使用が困難になることです。簡単な概要は次のとおりです。

すべてのウィンドウの写真付きのリンクは次のとおりです。

(申し訳ありませんが、stackoverflow ではまだ画像を投稿できません..)

最初のウィンドウは十分なスペースがある場合の外観で、下部 (青) は上部 (赤) にくっついています。

コードは次のようになります。

<DockPanel>

    <Grid VerticalAlignment="Top"
          Background="Red"
          DockPanel.Dock="Top">
        <Grid Height="100" />
    </Grid>

    <Grid Height="20"
          Background="Blue"
          VerticalAlignment="Top"
          DockPanel.Dock="Bottom" />

</DockPanel>

しかし、ウィンドウのサイズを変更して 2 行目が収まらなくなると、2 行目は固定されず、ウィンドウが小さすぎると見えなくなります: ウィンドウ 2

だから私が欲しいのは次のようなものです:

<DockPanel>
    <Grid Height="20"
          Background="Blue"
          DockPanel.Dock="Bottom" />

    <Grid VerticalAlignment="Top"
          Background="Red"
          DockPanel.Dock="Top">
        <Grid Height="100" />
    </Grid>
</DockPanel>

これにより、十分なスペースが利用可能な次のものが得られます：ウィンドウ3

ウィンドウのサイズを変更すると、これがウィンドウ 4 になります。

下は固定。ここでの問題は、スペースが多すぎると、2 番目の行が上にくっつかず、3 番目の写真のように下にくっつくことです。私は DockPanel.LastChildFill とドックパネルの子注文をいじってみました。1 つまたは複数のグリッドを使用してさまざまなレイアウトを試しましたが、うまくいきませんでした。どうすればこれを行うことができますか？

編集：@publicgk：その通りです。2番目のウィンドウは間違っていました。リンクを更新しました。

さらに、私は自分自身をもう少しうまく説明しようとします。最初の行が完全に赤で、2 番目の行が残りの部分 (青と白の組み合わせ) であることを考慮してください。次に、最初のコード サンプルでは、​​最初と 2 番目のウィンドウが表示されます。ウィンドウのサイズを変更します（ウィンドウ2）。

2 番目のコード サンプルでは、​​ウィンドウ 3 と 4 が生成されますが、ウィンドウが十分に大きい場合 (ウィンドウ 3、私が望むものではありません)、コンテンツは 2 行目の下部にあり、2 行目はウィンドウのサイズを変更しても表示されます (ウィンドウ4、それが私が望むものです)、2 番目の行は最初の行と重なっています。

要約すると、十分なスペースがある場合は行がウィンドウ 1 のように動作し、ない場合はウィンドウ 4 のように動作する必要があります。

Edit2:最初の行にはサイズが不明で可変のコンテンツが保持されることになっているため、グリッドを使用して最初の行の高さまたは最大高さを設定しても機能しません。ただし、2 番目の行の高さは既知であり、直接設定することができます。

この問題を示すサンプルを次に示します。

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication2"
    Title="MainWindow"
    Width="525"
    Height="350">
<Window.Resources>
    <local:RandomHeightConverter x:Key="RandomHeightConverter"/>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100*" MaxHeight="100"/>
        <RowDefinition Height="20" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"  Background="Red" Height="{Binding Converter={StaticResource RandomHeightConverter}}" />
    <Grid Grid.Row="1"  Background="Blue"  />
</Grid>


public class RandomHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return new Random().Next(20, 100);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

次のような結果が生成されます: variable first row problem

4

1 に答える 1

1

を使用してこのレイアウトを実行できるかどうかはわかりませんが、この種のレイアウトを実行DockPanelするために使用できる場合がGridあります。

このようなものはあなたがやろうとしていることを複製します

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="209" Width="525" Name="UI">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100*" MaxHeight="100" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0"  Background="Red" />
            <Grid Grid.Row="1"  Background="Blue"  />
        </Grid>
</Window>

または、RowDefinition表示するコンテンツにサイズをバインドします。次の例では、上部のセクションはコンテンツを固定するサイズになりますが、縮小できます。下部の行は下部のコンテンツに固定サイズであり、ウィンドウのサイズが小さい場合はオーバーラップします。一番上の行。

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" MaxHeight="{Binding ElementName=topContent, Path=ActualHeight, Mode=OneTime}" />
            <RowDefinition Height="{Binding ElementName=bottomContent, Path=ActualHeight,Mode=OneTime}"  />
        </Grid.RowDefinitions>
        <Grid x:Name="topContent" Grid.Row="0"  >
            <!--your top content-->
            <Grid Height="200" Background="Red" />
        </Grid>
        <Grid Grid.Row="1"  >
            <!--your bottom content-->
            <Grid x:Name="bottomContent" VerticalAlignment="Top" Height="20" Background="Blue" />
        </Grid>
    </Grid>

結果：

ここに画像の説明を入力してください ここに画像の説明を入力してください

于 2013-03-10T21:19:38.027 に答える