【C#/WPF】限制GridSplitter分隔欄的滑動範圍

GridSplitter可以自由滑動,例如一個水平方向的分隔欄,可以從屏幕頂端滑到屏幕底端。
現在的需求是:限制GridSplitter在一定範圍內滑動。

例如,現在有如下的橫豎兩個GridSplitter分隔欄。

<Grid>
    <Grid.RowDefinitions/>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="LLLLLLLLLLLLLL"/>
    <GridSplitter Grid.Row="0" Grid.Column="1" Width="10" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Wheat" DragDelta="GridSplitter_DragDelta"/>

    <Grid Grid.Row="0" Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="10"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="RRRRRRTTTTTTTT"/>
        <GridSplitter Grid.Row="1" Grid.Column="0" Height="10" HorizontalAlignment="Stretch" Background="Wheat"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Text="RRRRRRBBBBBBBB"/>

    </Grid>
</Grid>

運行起來效果如下:
這裏寫圖片描述

目標:

  • 嘗試限制右側的水平分隔欄的垂直方向滑動範圍。

思路:

  • 之前一直是嘗試動態獲取右側上下兩個部分的Height或ActualHeight,並在分隔符的滑動事件中進行處理。
private void sculptMaterialTab_GridSplitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
    if () ....
}
  • 比如在初始化時先獲得上下部分的默認高度,然後滑動中動態判斷,超過臨界值則禁止滑動。

  • 後來發現,MVVM下就算把右側上下兩部分分別用一個Grid進行包裹,也無法初始化時獲得這兩個Grid的正確高度。也許是因爲MVVM的初始化數據要優先於界面渲染,導致此時獲取的Height是NaN而ActualHeight爲0。


後來谷歌後看到另一種思路:

  • 其實限制GridSplitter分隔欄的滑動範圍,不是動態限制它兩側Grid的寬或高,而是應該限制它所在的Grid的RowDefinitions或ColumnDefinition的最小/最大寬或高!

給右側上下兩部分設置最小高度即可!

<Grid.RowDefinitions>
    <RowDefinition MinHeight="200"/>
    <RowDefinition Height="10"/>
    <RowDefinition MinHeight="200"/>
</Grid.RowDefinitions>

重要的參考:

https://blog.onedevjob.com/2012/01/16/gridsplitters-part-3-limiting-the-range-of-a-gridsplitter/

發佈了127 篇原創文章 · 獲贊 53 · 訪問量 83萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章