web-dev-qa-db-ja.com

WPFレスポンシブデザイン（液体レイアウト）

WPFアプリケーションを完全に応答性の高いアプリケーションにしたいのですが、このトピックに関する多くの投稿を読みましたが、残念ながら、これらすべての投稿は私が望むものを達成するのに役立ちませんでした。

私がしたいのは、アプリケーションをWebサイトのように応答性の高いものにすることです。つまり、Buttonsを垂直方向に配置し、次に、2つのボタンを水平に配置します。このような：

通常のウィンドウ

enter image description here

サイズ変更後

enter image description here

それはWPFで可能ですか？ This 質問で言及されている、私がやりたいことは「液体レイアウト」と呼ばれています？

c#wpfxamllayoutresponsive-design
5
Abdulsalam Elsharif

はい、それを実現する1つの方法は、WrapPanelとハックコンバーターを使用して、中央の要素が残りのすべてのスペースを確保することです。

<Window.Resources>
    <local:WpConverter x:Key="WpConverter"/>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Fill="BlueViolet" Height="75" HorizontalAlignment="Stretch"/>
    <WrapPanel x:Name="wp" Grid.Row="1" HorizontalAlignment="Stretch" Orientation="Horizontal">
        <StackPanel Width="100">
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
        </StackPanel>
        <Grid HorizontalAlignment="Stretch" Width="{Binding Path=ActualWidth, ElementName=wp,Converter={StaticResource WpConverter}}"></Grid>
        <Rectangle Margin="3" Fill="CornflowerBlue" Width="94" Height="200" ></Rectangle>
    </WrapPanel>
    <Rectangle Margin="3" Grid.Row="2" Fill="Cyan" Height="50" HorizontalAlignment="Stretch"/>

</Grid>

コンバーターの役割は、残りのすべてのスペース（ラパネルの幅-左のサイドバーの幅-右のサイドバーの幅）を確保するために、ミドルグリッド線を確保することです。

   public class WpConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Int32.Parse(value.ToString()) - 200;
    }

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

Ps：複数値コンバーターを使用して、コンバーターで値をハードコーディングする代わりに、左サイドバーと右サイドバーのActualWidthsを渡すこともできます。

結果：

enter image description here

5
ELH