From 5964108da04ae8de0235331428be9b6af194b4cc Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 20 Jan 2024 12:44:13 +0800
Subject: [PATCH] feat: change demo layout.

---
 demo/Ursa.Demo/Pages/RangeSliderDemo.axaml | 56 ++++++++++++++++------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/RangeSliderDemo.axaml b/demo/Ursa.Demo/Pages/RangeSliderDemo.axaml
index 87ddecb..7aa427b 100644
--- a/demo/Ursa.Demo/Pages/RangeSliderDemo.axaml
+++ b/demo/Ursa.Demo/Pages/RangeSliderDemo.axaml
@@ -1,26 +1,52 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:u="https://irihi.tech/ursa"
-             mc:Ignorable="d" d:DesignWidth="800"
-             xmlns:vm="using:Ursa.Demo.ViewModels"
-             x:DataType="vm:RangeSliderDemoViewModel"
-             x:CompileBindings="True"
-             d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.RangeSliderDemo">
+<UserControl
+    x:Class="Ursa.Demo.Pages.RangeSliderDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:RangeSliderDemoViewModel"
+    mc:Ignorable="d">
     <UserControl.Styles>
         <Style Selector="u|NumericDoubleUpDown">
-            <Setter Property="Width" Value="300"></Setter>
+            <Setter Property="Width" Value="300" />
         </Style>
     </UserControl.Styles>
     <StackPanel>
-        <u:RangeSlider  TickFrequency="5" IsSnapToTick="True" TickPlacement="TopLeft"/>
+        <u:RangeSlider
+            IsSnapToTick="True"
+            TickFrequency="5"
+            TickPlacement="TopLeft" 
+            Minimum="{Binding #range.Minimum, Mode=TwoWay}"
+            Maximum="{Binding #range.Maximum, Mode=TwoWay}"
+            LowerValue="{Binding #range.LowerValue, Mode=TwoWay}"
+            UpperValue="{Binding #range.UpperValue, Mode=TwoWay}"/>
         <u:NumericDoubleUpDown InnerLeftContent="Minimum" Value="{Binding #range.Minimum, Mode=TwoWay}" />
         <u:NumericDoubleUpDown InnerLeftContent="Maximum" Value="{Binding #range.Maximum, Mode=TwoWay}" />
         <u:NumericDoubleUpDown InnerLeftContent="LowerValue" Value="{Binding #range.LowerValue, Mode=TwoWay}" />
         <u:NumericDoubleUpDown InnerLeftContent="UpperValue" Value="{Binding #range.UpperValue, Mode=TwoWay}" />
-        <ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding Orientation}"></ComboBox>
-        <u:RangeSlider Name="range" TickFrequency="5" Orientation="{Binding Orientation}" Height="300"></u:RangeSlider>
+        <ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding Orientation}" />
+        <u:RangeSlider
+            Name="range"
+            Margin="8"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top"
+            Orientation="{Binding Orientation}"
+            TickFrequency="5">
+            <u:RangeSlider.Styles>
+                <Style Selector="u|RangeSlider:horizontal">
+                    <Setter Property="Width" Value="400" />
+                    <Setter Property="Height" Value="40" />
+                </Style>
+                <Style Selector="u|RangeSlider:vertical">
+                    <Setter Property="Width" Value="40" />
+                    <Setter Property="Height" Value="400" />
+                </Style>
+            </u:RangeSlider.Styles>
+        </u:RangeSlider>
     </StackPanel>
 </UserControl>