Skip to content

Commit

Permalink
Gridsplitter properties (#364)
Browse files Browse the repository at this point in the history
* Added missing properties to GridSplitter
PreviewContentProperty not included (not sure how to handle it)

* Added GridSplitter demo to controlcatalog

* previewContent typechecked
Hard to find usage example so not sure how to write a good test/example

* Added a column gridsplitter, removed unused (commented) code
  • Loading branch information
beyon authored Nov 1, 2023
1 parent 33a0cd7 commit a625eaa
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<Compile Include="Views\Tabs\WrapPanelDemo.fs" />
<Compile Include="Views\Tabs\DataTemplateDemo.fs" />
<Compile Include="Views\Tabs\GridDemo.fs" />
<Compile Include="Views\Tabs\GridSplitterDemo.fs" />
<Compile Include="Views\Tabs\CanvasDemo.fs" />
<Compile Include="Views\Tabs\ContextMenuDemo.fs" />
<Compile Include="Views\Tabs\StylesDemo.fs" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ module MainView =
TabItem.header "Grid Demo"
TabItem.content (ViewBuilder.Create<GridDemo.Host>([]))
]
TabItem.create [
TabItem.header "Gridsplitter Demo"
TabItem.content (ViewBuilder.Create<GridSplitterDemo.Host>([]))
]
TabItem.create [
TabItem.header "WrapPanel Demo"
TabItem.content (ViewBuilder.Create<WrapPanelDemo.Host>([]))
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
namespace Avalonia.FuncUI.ControlCatalog.Views

open System
open Elmish
open Avalonia
open Avalonia.Controls
open Avalonia.Layout
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI
open Avalonia.FuncUI.Elmish

module GridSplitterDemo =
type State =
{ dragIncrement: int
keyboardIncrement: int
customPreview: bool
resizeBehavior: GridResizeBehavior
resizeDirection: GridResizeDirection}

let init () =
{ dragIncrement = 1
keyboardIncrement = 20
customPreview = false
resizeBehavior = GridResizeBehavior.BasedOnAlignment
resizeDirection = GridResizeDirection.Auto}

type Msg =
| SetDragIncrement of int
| SetKeyboardIncrement of int
| SetCustomPreview of bool
| SetGridResizeBehavior of GridResizeBehavior
| SetGridResizeDirection of GridResizeDirection

let update (msg: Msg) (state: State) : State =
match msg with
| SetDragIncrement increment -> { state with dragIncrement = increment }
| SetKeyboardIncrement increment -> { state with keyboardIncrement = increment }
| SetCustomPreview isChecked -> { state with customPreview = isChecked }
| SetGridResizeBehavior behavior -> { state with resizeBehavior = behavior}
| SetGridResizeDirection direction -> { state with resizeDirection = direction}

let gridCellView col row text =
Border.create [
Grid.column col
Grid.row row
Border.background Media.Colors.AliceBlue
Border.borderThickness 2
Border.borderBrush (Media.Colors.Black.ToString())
Border.child (
TextBlock.create [
TextBlock.dock Dock.Top
TextBlock.fontSize 48.0
TextBlock.verticalAlignment VerticalAlignment.Center
TextBlock.horizontalAlignment HorizontalAlignment.Center
TextBlock.text text
]
)
]

let view (state: State) (dispatch) =
DockPanel.create [
DockPanel.children [
TextBlock.create [
TextBlock.dock Dock.Top
TextBlock.margin 5.0
TextBlock.text "GridSplitter properties"
TextBlock.fontSize 24.
]
StackPanel.create [
StackPanel.dock Dock.Top
StackPanel.orientation Orientation.Horizontal
StackPanel.spacing 16.0
StackPanel.children [
StackPanel.create [
StackPanel.orientation Orientation.Vertical
StackPanel.spacing 16.0
StackPanel.children [
DockPanel.create [
DockPanel.lastChildFill false
DockPanel.children [
TextBlock.create [
TextBlock.text "Drag increment:"
TextBlock.dock Dock.Left
TextBlock.margin(0.,0.,16.,0.)
TextBlock.verticalAlignment VerticalAlignment.Center
]
TextBox.create [
TextBox.text (string state.dragIncrement)
TextBox.width 64.
TextBox.dock Dock.Right
TextBlock.margin(0.,0.,16.,0.)
TextBox.onTextChanged (fun text ->
match text |> Int32.TryParse with
| true, inc -> inc |> SetDragIncrement |> dispatch
| false, _ -> ()
)
]
]
]
DockPanel.create [
DockPanel.lastChildFill false
DockPanel.children [
TextBlock.create [
TextBlock.text "Keyboard increment:"
TextBlock.verticalAlignment VerticalAlignment.Center
TextBlock.dock Dock.Left
TextBlock.margin(0.,0.,16.,0.)
]
TextBox.create [
TextBox.text (string state.keyboardIncrement)
TextBlock.width 64.
TextBox.dock Dock.Right
TextBlock.margin(0.,0.,16.,0.)
TextBox.onTextChanged (fun text ->
match text |> Int32.TryParse with
| true, inc -> inc |> SetKeyboardIncrement |> dispatch
| false, _ -> ()
)
]
]
]
]
]
StackPanel.create [
StackPanel.orientation Orientation.Vertical
StackPanel.spacing 16.0
StackPanel.children [
DockPanel.create [
DockPanel.lastChildFill false
DockPanel.children [
TextBlock.create [
TextBlock.verticalAlignment VerticalAlignment.Center
TextBlock.text "Grid resize bahavior:"
TextBlock.dock Dock.Left
TextBlock.margin(0.,0.,16.,0.)
]
ComboBox.create [
ComboBox.dataItems [
GridResizeBehavior.BasedOnAlignment
GridResizeBehavior.CurrentAndNext
GridResizeBehavior.PreviousAndCurrent
GridResizeBehavior.PreviousAndNext
]
ComboBox.dock Dock.Right
ComboBox.horizontalAlignment HorizontalAlignment.Stretch
ComboBox.selectedItem state.resizeBehavior
ComboBox.onSelectedItemChanged (
tryUnbox >> Option.iter(SetGridResizeBehavior >> dispatch)
)
]
]
]
DockPanel.create [
DockPanel.lastChildFill false
DockPanel.children [
TextBlock.create [
TextBlock.verticalAlignment VerticalAlignment.Center
TextBlock.text "Grid resize direction:"
TextBlock.margin(0.,0.,16.,0.)
]
ComboBox.create [
ComboBox.dataItems [
GridResizeDirection.Auto
GridResizeDirection.Columns
GridResizeDirection.Rows
]
ComboBox.dock Dock.Right
ComboBox.horizontalAlignment HorizontalAlignment.Stretch
ComboBox.selectedItem state.resizeDirection
ComboBox.onSelectedItemChanged (
tryUnbox >> Option.iter(SetGridResizeDirection >> dispatch)
)
]
]
]
]
]
]
]
StackPanel.create [
StackPanel.dock Dock.Top
StackPanel.orientation Orientation.Horizontal
StackPanel.spacing 16.0
StackPanel.verticalAlignment VerticalAlignment.Bottom
StackPanel.children [
ToggleSwitch.create [
ToggleSwitch.content "Show Preview"
ToggleSwitch.onContent "Enabled"
ToggleSwitch.offContent "Disabled"
ToggleSwitch.isChecked state.customPreview
ToggleSwitch.onChecked (fun _ -> SetCustomPreview true |> dispatch)
ToggleSwitch.onUnchecked (fun _ -> SetCustomPreview false |> dispatch)
]
]
]
Grid.create [
Grid.columnDefinitions "1*,1*,1*"
Grid.rowDefinitions "1*,1*"
Grid.showGridLines true
Grid.margin(10., 10., 20., 20.)
Grid.children [
gridCellView 0 0 "A"
gridCellView 1 0 "B"
gridCellView 2 0 "C"
gridCellView 0 2 "D"
gridCellView 1 1 "E"
gridCellView 2 1 "F"
GridSplitter.create [
GridSplitter.dragIncrement state.dragIncrement
GridSplitter.keyboardIncrement state.keyboardIncrement
GridSplitter.showsPreview state.customPreview
GridSplitter.resizebehavior state.resizeBehavior
GridSplitter.resizeDirection state.resizeDirection
Grid.column 1
Grid.rowSpan 2
Grid.horizontalAlignment HorizontalAlignment.Left
Grid.verticalAlignment VerticalAlignment.Stretch
Grid.width 5.0
]
GridSplitter.create [
GridSplitter.dragIncrement state.dragIncrement
GridSplitter.keyboardIncrement state.keyboardIncrement
GridSplitter.showsPreview state.customPreview
GridSplitter.resizebehavior state.resizeBehavior
GridSplitter.resizeDirection state.resizeDirection
Grid.column 2
Grid.rowSpan 2
Grid.horizontalAlignment HorizontalAlignment.Left
Grid.verticalAlignment VerticalAlignment.Stretch
Grid.width 5.0
]
GridSplitter.create [
GridSplitter.dragIncrement state.dragIncrement
GridSplitter.keyboardIncrement state.keyboardIncrement
GridSplitter.showsPreview state.customPreview
GridSplitter.resizebehavior state.resizeBehavior
GridSplitter.resizeDirection state.resizeDirection
Grid.columnSpan 3
Grid.row 1
Grid.horizontalAlignment HorizontalAlignment.Stretch
Grid.verticalAlignment VerticalAlignment.Top
Grid.height 5.0
]
]
]
]
]

type Host() as this =
inherit Hosts.HostControl()
do
Elmish.Program.mkSimple init update view
|> Program.withHost this
|> Program.withConsoleTrace
|> Program.run

36 changes: 35 additions & 1 deletion src/Avalonia.FuncUI/DSL/GridSplitter.fs
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,38 @@ module GridSplitter =
ViewBuilder.Create<GridSplitter>(attrs)

type GridSplitter with
end
/// <summary>
/// Restricts splitter to move a multiple of the specified units.
/// </summary>
static member dragIncrement<'t when 't :> GridSplitter>(value: double) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<double>(GridSplitter.DragIncrementProperty, value, ValueNone)

/// <summary>
/// The Distance to move the splitter when pressing the keyboard arrow keys.
/// </summary>
static member keyboardIncrement<'t when 't :> GridSplitter>(value: double) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<double>(GridSplitter.KeyboardIncrementProperty, value, ValueNone)

///// <summary>
///// Gets or sets content that will be shown when ShowsPreview is enabled and user starts resize operation.
///// </summary>
static member previewContent<'t, 'c when 'c :> Control and 't :> GridSplitter>(preview: ITemplate<'c>) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<ITemplate<'c>>(GridSplitter.PreviewContentProperty, preview, ValueNone)

/// <summary>
/// Indicates which Columns or Rows the Splitter resizes.
/// </summary>
static member resizebehavior<'t when 't :> GridSplitter>(resizeBehavior: GridResizeBehavior) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<GridResizeBehavior>(GridSplitter.ResizeBehaviorProperty, resizeBehavior, ValueNone)

/// <summary>
/// Indicates whether the Splitter resizes the Columns, Rows, or Both
/// </summary>
static member resizeDirection<'t when 't :> GridSplitter>(resizeDirection: GridResizeDirection) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<GridResizeDirection>(GridSplitter.ResizeDirectionProperty, resizeDirection, ValueNone)

/// <summary>
/// Indicates whether to Preview the column resizing without updating layout.
/// </summary>
static member showsPreview<'t when 't :> GridSplitter>(value: bool) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<bool>(GridSplitter.ShowsPreviewProperty, value, ValueNone)

0 comments on commit a625eaa

Please sign in to comment.