c# - RowSplitter を UniformGrid などで使用して、目的の結果を得る

Question

私はwpfにかなり慣れていないので、ご容赦ください。

私の問題は、ポップアップウィンドウに表示される 4 つのグラフコントロールが上下に配置されていることです。デフォルトでは最初は 4 つすべてが表示されますが、ウィンドウが表示された後、ユーザーはリボンコントロールのチェックボックスをオフにして、1 つまたは複数のグラフをオフにすることができます。残りのグラフは残りのスペースを占めるように自動サイズ調整されるため、UniformGrid を使用します。

ここで、RowSplitter を追加して、ユーザーが表示される各グラフの高さを制御できるようにする必要があります。上のグラフの上部をウィンドウの上部に固定し、下部のグラフの下部をウィンドウの下部に固定する必要があります。ユーザーが 2 つのグラフ間で RowSplitter をスライドすると、両方のグラフの高さに影響するはずです。

簡単なテストプロジェクトを作成して試してみました。

<Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <StackPanel Background="LightGray"  Grid.Row="0" Orientation="Horizontal">
            <CheckBox Content="Graph 1" Name="Graph1Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 2" Name="Graph2Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 3" Name="Graph3Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 4" Name="Graph4Vis" IsChecked="True" HorizontalAlignment="Left"/>
        </StackPanel>
        <UniformGrid Grid.Row="1" Height="Auto"  Columns="1">
            <Label Content="Graph 1" Background="Azure" Grid.Row="0" 
                   Visibility="{Binding IsChecked, ElementName=Graph1Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="1" Width="Auto" Height="8" Background="DarkSlateBlue"
                        HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
        <Label Content="Graph 2" Background="Lavender" Grid.Row="2" 
               Visibility="{Binding IsChecked, ElementName=Graph2Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="3" Width="Auto" Height="8" Background="DarkSlateBlue"
                        HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
        <Label Content="Graph 3" Background="Moccasin" Grid.Row="4"
               Visibility="{Binding IsChecked, ElementName=Graph3Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="5" Width="Auto" Height="8" Background="DarkSlateBlue"
                        HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
        <Label Content="Graph 4" Background="Beige" Grid.Row="6"
               Visibility="{Binding IsChecked, ElementName=Graph4Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
    </UniformGrid>
    </Grid>

どんな助けでも大歓迎です。

score 2 · Accepted Answer

私の考えは、実際にグリッドに行を追加/削除することです。これには他の要素を少し調整する必要がありますが、目的の方法でグリッド/グリッドスプリッターを使用できるようになります。ソリューションは非常に一般的なものに保つことができます。ボーナスとして、行の高さが記憶されるため、グラフを再度表示すると、前の高さで表示されます。また、他のグラフは、行が削除されたときに比例して空き領域を占有します。これは正しい動作のようです。

グリッドスプリッターごとに1つの行を使用するのではなく、各行の下部に1つだけ配置します（最後の行を除く）。xamlの部分：

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="panelVisibilities" Background="LightGray"  Grid.Row="0" Orientation="Horizontal">
            <CheckBox Content="Graph 1" x:Name="Graph1Vis" IsChecked="True" HorizontalAlignment="Left" Click="GraphVis_Click"/>
            <CheckBox Content="Graph 2" x:Name="Graph2Vis" IsChecked="True" HorizontalAlignment="Left" Click="GraphVis_Click"/>
            <CheckBox Content="Graph 3" x:Name="Graph3Vis" IsChecked="True" HorizontalAlignment="Left" Click="GraphVis_Click"/>
            <CheckBox Content="Graph 4" x:Name="Graph4Vis" IsChecked="True" HorizontalAlignment="Left" Click="GraphVis_Click"/>
        </StackPanel>
        <Grid Grid.Row="1" VerticalAlignment="Stretch" x:Name="graphGrid" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" MinHeight="20"/>
                <RowDefinition Height="*" MinHeight="20"/>
                <RowDefinition Height="*" MinHeight="20"/>
                <RowDefinition Height="*" MinHeight="20"/>
            </Grid.RowDefinitions> 
            <Label Grid.Row="0" Content="Graph 1" Background="Azure"  Visibility="{Binding IsChecked, ElementName=Graph1Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="0" ResizeBehavior="CurrentAndNext" VerticalAlignment="Bottom" Height="2" Background="DarkSlateBlue" HorizontalAlignment="Stretch"  Visibility="{Binding IsChecked, ElementName=Graph1Vis, Converter={StaticResource BooleanToVisibilityConverter}}" />
            <Label Grid.Row="1" Content="Graph 2" Background="Lavender"  Visibility="{Binding IsChecked, ElementName=Graph2Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="1" ResizeBehavior="CurrentAndNext" VerticalAlignment="Bottom" Height="2" Background="DarkSlateBlue" HorizontalAlignment="Stretch"  Visibility="{Binding IsChecked, ElementName=Graph2Vis, Converter={StaticResource BooleanToVisibilityConverter}}" />
            <Label Grid.Row="2" Content="Graph 3" Background="Moccasin" Visibility="{Binding IsChecked, ElementName=Graph3Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="2" ResizeBehavior="CurrentAndNext" VerticalAlignment="Bottom" Height="2" Background="DarkSlateBlue" HorizontalAlignment="Stretch" Visibility="{Binding IsChecked, ElementName=Graph3Vis, Converter={StaticResource BooleanToVisibilityConverter}}" />
            <Label Grid.Row="3" Content="Graph 4" Background="Beige" Visibility="{Binding IsChecked, ElementName=Graph4Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        </Grid>
    </Grid>
</UserControl>

背後にあるコード：

public partial class UserControl1 : UserControl
{
    private List<RowDefinition> _rows; // rows in graphGrid
    private List<CheckBox> _visibilityCheckboxes; // checkboxes that determine graph visibilities
    private Dictionary<int, List<UIElement>> _elementsByRow = new Dictionary<int, List<UIElement>>(); // map of elements per row


    public UserControl1()
    {
        InitializeComponent();

        _visibilityCheckboxes = this.panelVisibilities.Children.OfType<CheckBox>().ToList();
        _rows = this.graphGrid.RowDefinitions.ToList();

        // create map of elements per row
        var elements = this.graphGrid.Children.Cast<UIElement>();
        for (int i = 0; i < _rows.Count; i++)
        {
            _elementsByRow.Add(i, elements.Where(e => Grid.GetRow(e) == i).ToList());
        }

        // check counts (optional)
        if (_rows.Count != _visibilityCheckboxes.Count)
            System.Diagnostics.Debug.WriteLine("Graph count does not match checkbox count.");


    }

    /// <summary>
    /// Handles the visibility checkboxes click.
    /// Adds/removes rows from the graphGrid, and adjusts the other elements accordingly.
    /// </summary>
    private void GraphVis_Click(object sender, RoutedEventArgs e)
    {
        CheckBox chbx = sender as CheckBox;

        if (chbx != null && _visibilityCheckboxes.Contains(chbx))
        {
            int actualIndex = GetActualIndex(chbx); // row index at which the change occurs
            int originalIndex = _visibilityCheckboxes.IndexOf(chbx); // original index of the inserted row
            bool isChecked = (bool)chbx.IsChecked;

            RepositionControls(actualIndex, isChecked); 

            if (isChecked)
            {
                this.graphGrid.RowDefinitions.Insert(actualIndex, _rows[originalIndex]); // add row
                foreach (var element in _elementsByRow[originalIndex])
                    Grid.SetRow(element, actualIndex); // set element's grid.row to inserted row number
            }
            else
                this.graphGrid.RowDefinitions.RemoveAt(actualIndex); // remove row
        }

    }

    /// <summary>
    /// Determines at which row number the change needs to occur.
    /// E.g. when checking chbx3, but only chbx1 is already checked (chbx2 is not), 
    /// the index of change (zero based) is 1 and not 2.
    /// </summary>
    /// <param name="chbx">Checkbox that was just changed</param>
    private int GetActualIndex(CheckBox chbx)
    {
        int i = 0;
        foreach (var c in _visibilityCheckboxes)
        {
            if (c == chbx) break;
            if ((bool)c.IsChecked) i++;
        }
        return i;
    }

    /// <summary>
    /// Moves elements to the appropriate grid row
    /// </summary>
    /// <param name="startIndex">Row number, at which the change occurs</param>
    /// <param name="isChecked">True if adding row, false when removing row</param>
    private void RepositionControls(int startIndex, bool isChecked)
    {
        if (!isChecked) startIndex++; // e.g. remove at row1 --> elements in row2, row3.. need to be adjusted

        // get all elements that need row adjustment (IsMeasureValid is false for non-displayed elements - is there a better property to use?)
        var elementsToMove = this.graphGrid.Children.Cast<UIElement>().Where(e => Grid.GetRow(e) >= startIndex && e.IsMeasureValid);

        foreach (var element in elementsToMove)
        {
            // increase or decrease grid.row property
            Grid.SetRow(element, Grid.GetRow(element) + (isChecked ? 1 : -1)); 
        }
    }
}

考えられる改善は、一番下のグラフから常にグリッドスプリッターを削除することです。これは、私が推測するのはそれほど難しいことではありません。

score 1 · Accepted Answer

アイデアは次のとおりです。4 つの行でグリッドを構築し、それぞれに 1 つのグラフがあります。Grid.RowSpan を 4 に設定して、分割ボタンとして 3 つの四角形をグリッドに追加します。

MainWindow.xaml:

<Window x:Class="testwpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        MouseMove="Window_MouseMove_1" MouseUp="Window_MouseUp_1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="row1" Height="40"/>
            <RowDefinition Name="row2" Height="40"/>
            <RowDefinition Name="row3" Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="Green"/>
        <Rectangle Grid.Row="1" Fill="Blue"/>
        <Rectangle Grid.Row="2" Fill="Red"/>
        <Rectangle Grid.Row="3" Fill="Yellow"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter1" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,40,0,0"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter2" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,80,0,0"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter3" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,120,0,0"/>
    </Grid>
</Window>

MainWindow.xaml.cs:

    FrameworkElement dragginSplitter = null;
    private void splitter_MouseDown_1(object sender, MouseButtonEventArgs e)
    {
        dragginSplitter = sender as FrameworkElement;
    }
    private void Window_MouseMove_1(object sender, MouseEventArgs e)
    {
        if (dragginSplitter != null)
            dragginSplitter.Margin = new Thickness(0, e.GetPosition(this).Y, 0, 0);
        if (splitter2.Margin.Top < splitter1.Margin.Top + 10) splitter2.Margin = new Thickness(0, splitter1.Margin.Top + 10, 0, 0);
        if (splitter3.Margin.Top < splitter2.Margin.Top + 10) splitter3.Margin = new Thickness(0, splitter2.Margin.Top + 10, 0, 0);
        row1.Height = new GridLength(splitter1.Margin.Top);
        row2.Height = new GridLength(splitter2.Margin.Top - splitter1.Margin.Top);
        row3.Height = new GridLength(splitter3.Margin.Top - splitter2.Margin.Top);
    }
    private void Window_MouseUp_1(object sender, MouseButtonEventArgs e)
    {
        dragginSplitter = null;
    }

Window_MouseMove_1 に関する重要な注意事項:

スプリッターがドラッグされるたびに、dragingSplitter の上部マージンは、マウスの Y 位置に等しくなります。
スプリッターは互いにすれ違うべきではないため、スプリッターがドラッグされるたびに上部マージンをチェックします。
グリッドの行の高さ (グリッドの内容ではありません) は、スプリッターがドラッグされるたびに、スプリッターの上余白に従って計算されます。

編集：

非表示/表示のニーズを満たすために、コードを変更し、さまざまな条件を追加しました。

<Window x:Class="testwpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        MouseMove="Window_MouseMove_1" MouseUp="Window_MouseUp_1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="row1" Height="40"/>
            <RowDefinition Name="row2" Height="40"/>
            <RowDefinition Name="row3" Height="40"/>
            <RowDefinition Name="row4" Height="*"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="Green"/>
        <Rectangle Grid.Row="1" Fill="Blue"/>
        <Rectangle Grid.Row="2" Fill="Red"/>
        <Rectangle Grid.Row="3" Fill="Yellow"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter1" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,40,0,0"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter2" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,80,0,0"/>
        <Rectangle Fill="#5000" VerticalAlignment="Top" Height="10" Name="splitter3" MouseDown="splitter_MouseDown_1" Grid.RowSpan="4" Margin="0,120,0,0"/>
        <WrapPanel Grid.RowSpan="4">
            <CheckBox Name="check1" Content="graph1" IsChecked="True" Checked="CheckBox_Checked_1" Unchecked="CheckBox_Checked_1"/>
            <CheckBox Name="check2" Content="graph2" IsChecked="True" Checked="CheckBox_Checked_1" Unchecked="CheckBox_Checked_1"/>
            <CheckBox Name="check3" Content="graph3" IsChecked="True" Checked="CheckBox_Checked_1" Unchecked="CheckBox_Checked_1"/>
            <CheckBox Name="check4" Content="graph4" IsChecked="True" Checked="CheckBox_Checked_1" Unchecked="CheckBox_Checked_1"/>
        </WrapPanel>
    </Grid>
</Window>

xaml の変更: 4 つのチェックボックスが追加され、4 行目に名前が付けられます。

FrameworkElement dragginSplitter = null;
private void splitter_MouseDown_1(object sender, MouseButtonEventArgs e)
{
    dragginSplitter = sender as FrameworkElement;
}

private void Window_MouseMove_1(object sender, MouseEventArgs e)
{
    if (dragginSplitter != null)
    {
        dragginSplitter.Margin = new Thickness(0, e.GetPosition(this).Y, 0, 0);
        updateSplitters();
    }
}

private void updateSplitters()
{
    if (splitter2.Margin.Top < splitter1.Margin.Top + 10) splitter2.Margin = new Thickness(0, splitter1.Margin.Top + 10, 0, 0);
    if (splitter3.Margin.Top < splitter2.Margin.Top + 10) splitter3.Margin = new Thickness(0, splitter2.Margin.Top + 10, 0, 0);

    if (check1.IsChecked.Value)
    {
        if (!check2.IsChecked.Value && !check3.IsChecked.Value && !check4.IsChecked.Value)
            row1.Height = new GridLength(1, GridUnitType.Star);
        else 
            row1.Height = new GridLength(splitter1.Margin.Top);
    }
    else
        row1.Height = new GridLength(0);

    if (check2.IsChecked.Value)
    {
        if (!check3.IsChecked.Value && !check4.IsChecked.Value)
            row2.Height = new GridLength(1, GridUnitType.Star);
        else if(check1.IsChecked.Value)
            row2.Height = new GridLength(splitter2.Margin.Top - splitter1.Margin.Top);
        else
            row2.Height = new GridLength(splitter2.Margin.Top);
    }
    else
        row2.Height = new GridLength(0);

    if (check3.IsChecked.Value)
    {
        if (!check4.IsChecked.Value)
            row3.Height = new GridLength(1, GridUnitType.Star);
        else if (check2.IsChecked.Value)
            row3.Height = new GridLength(splitter3.Margin.Top - splitter2.Margin.Top);
        else if (check1.IsChecked.Value)
            row3.Height = new GridLength(splitter3.Margin.Top - splitter1.Margin.Top);
        else
            row3.Height = new GridLength(splitter3.Margin.Top);
    }
    else
        row3.Height = new GridLength(0);

    row4.Height = check4.IsChecked.Value ? new GridLength(1, GridUnitType.Star) : new GridLength(0);
}


private void Window_MouseUp_1(object sender, MouseButtonEventArgs e)
{
    dragginSplitter = null;
}

private void CheckBox_Checked_1(object sender, RoutedEventArgs e)
{
    if (check4 == null) return;//for when not yet completely loaded

    if (!check1.IsChecked.Value)
        splitter1.Visibility = System.Windows.Visibility.Collapsed;
    if (!check2.IsChecked.Value)
        splitter2.Visibility = System.Windows.Visibility.Collapsed;
    if (!check3.IsChecked.Value)
        splitter3.Visibility = System.Windows.Visibility.Collapsed;
    if (!check4.IsChecked.Value)
    {
        splitter3.Visibility = System.Windows.Visibility.Collapsed;
        if (!check3.IsChecked.Value)
            splitter2.Visibility = System.Windows.Visibility.Collapsed;
        if (!check2.IsChecked.Value)
            splitter1.Visibility = System.Windows.Visibility.Collapsed;
    }

    if (check1.IsChecked.Value && (check2.IsChecked.Value || check3.IsChecked.Value || check4.IsChecked.Value))
        splitter1.Visibility = System.Windows.Visibility.Visible;
    if (check2.IsChecked.Value && (check3.IsChecked.Value || check4.IsChecked.Value))
        splitter2.Visibility = System.Windows.Visibility.Visible;
    if (check3.IsChecked.Value && check4.IsChecked.Value)
        splitter3.Visibility = System.Windows.Visibility.Visible;

    updateSplitters();
}

cs の変更:

updateSplitters 関数は、スプリッターのマージンを更新するための以前のロジックに置き換えられます。
チェックボックスをオンまたはオフにすると、スプリッターの可視性が変化し、updateSplitters が呼び出されます。
updateSplitters が残りのすべてを行います。グリッドの残りのスペースを埋めるために、最後に表示される行の GridUnitType が常に Star であることを除いて、多くはありません。

私が見つけた唯一の問題は、ウィンドウのサイズが変更されているとき、または上の行の 1 つが大きな Height 値にサイズ変更されているときに、Grid の下部の内容が画面からはみ出す可能性があることです。

score 0 · Accepted Answer

ここに私が行った変更があります...

MainWindow.xaml:

このセクションでは、以下を必ず追加してください。

ここに画像の説明を入力

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Background="LightGray" Grid.Row="0" Orientation="Horizontal">
            <CheckBox Content="Graph 1" x:Name="Graph1Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 2" x:Name="Graph2Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 3" x:Name="Graph3Vis" IsChecked="True" HorizontalAlignment="Left"/>
            <CheckBox Content="Graph 4" x:Name="Graph4Vis" IsChecked="True" HorizontalAlignment="Left"/>
        </StackPanel>
            
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, ElementName=Graph1Vis, Converter={local:CheckedToLengthConverter}}"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, ElementName=Graph2Vis, Converter={local:CheckedToLengthConverter}}"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, ElementName=Graph3Vis, Converter={local:CheckedToLengthConverter}}"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, ElementName=Graph4Vis, Converter={local:CheckedToLengthConverter}}"></RowDefinition>
            </Grid.RowDefinitions>
                
            <Label Content="Graph 1" Background="Azure" Grid.Row="0" Visibility="{Binding IsChecked, ElementName=Graph1Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="1" Width="Auto" Height="8" Background="DarkSlateBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center" Visibility="{Binding IsChecked, ElementName=Graph1Vis, Converter={StaticResource BooleanToVisibilityConverter}}" />
            <Label Content="Graph 2" Background="Lavender" Grid.Row="2" Visibility="{Binding IsChecked, ElementName=Graph2Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="3" Height="8" Background="DarkSlateBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center" Visibility="{Binding IsChecked, ElementName=Graph2Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <Label Content="Graph 3" Background="Moccasin" Grid.Row="4" Visibility="{Binding IsChecked, ElementName=Graph3Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <GridSplitter Grid.Row="5" Width="Auto" Height="8" Background="DarkSlateBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center" Visibility="{Binding IsChecked, ElementName=Graph4Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <Label Content="Graph 4" Background="Beige" Grid.Row="6" Visibility="{Binding IsChecked, ElementName=Graph4Vis, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        </Grid>
    </Grid>
</Grid>

MainWindow.xaml.cs

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    {
public class CheckedToLengthConverter : System.Windows.Markup.MarkupExtension, IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return System.Convert.ToBoolean(value) ? new GridLength(1, GridUnitType.Star) : new GridLength(0, GridUnitType.Pixel);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return Binding.DoNothing;
        }

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }
    }
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
//etc...

これがあなたが探しているものであることを願っています。質問や懸念がある場合はお知らせください。

また、始めたばかりなので、役立つアドバイスをいくつか提供します。

名前

WPF を使用する場合、一部の要素にはプロパティがありません。そのため、要素に名前を付けるときは常にName使用することをお勧めしx:Nameます。

グリッドスプリッター

を使用GridSplitterするときは常に、次の情報を提供してください。

VerticalAlignment
HorizontalAlignment
幅および/または高さ

これにより、が機能することが保証されGridSplitterます。

あなたの例では、それぞれGridSplitterに異なるVerticalAlignment値があり、一貫性のない結果になります。を使用することをお勧めしVerticalAlignment="Center"ます。

グリッド/均一グリッド

Grid以上の使用をお勧めしUniformGridます。は間違いなく最も強力なレイアウトコンテナーであり、 (めったに使用されない)Gridよりもはるかに自由度が高くなります。UniformGrid

c# - RowSplitter を UniformGrid などで使用して、目的の結果を得る

3 に答える 3

編集：

名前

グリッドスプリッター

グリッド/均一グリッド

Related

Reference