瀏覽代碼

Refactor ListBoxPage.

- Make the list box fill available space
- `SelectionMode` is a `[Flags]` enum so a combo box didn't make sense
- Add check for `AutoScrollToSelectedItem`
Steven Kirk 5 年之前
父節點
當前提交
1b4fe4f563

+ 4 - 1
samples/ControlCatalog/MainView.xaml

@@ -45,7 +45,10 @@
         <pages:ItemsRepeaterPage/>
       </TabItem>
       <TabItem Header="LayoutTransformControl"><pages:LayoutTransformControlPage/></TabItem>
-      <TabItem Header="ListBox"><pages:ListBoxPage/></TabItem>
+      <TabItem Header="ListBox"
+               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <pages:ListBoxPage/>
+      </TabItem>
       <TabItem Header="Menu"><pages:MenuPage/></TabItem>
       <TabItem Header="Notifications"><pages:NotificationsPage/></TabItem>
 	    <TabItem Header="NumericUpDown"><pages:NumericUpDownPage/></TabItem>

+ 20 - 30
samples/ControlCatalog/Pages/ListBoxPage.xaml

@@ -1,35 +1,25 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ListBoxPage">
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">ListBox</TextBlock>
-    <TextBlock Classes="h2">Hosts a collection of ListBoxItem.</TextBlock>
-
-    <StackPanel Orientation="Horizontal"
-              Margin="0,16,0,0"
-              HorizontalAlignment="Center"
-              Spacing="16">
-      <StackPanel Orientation="Vertical" Spacing="8">
-        <ListBox Items="{Binding Items}"
-                 Selection="{Binding Selection}"
-                 AutoScrollToSelectedItem="True"
-                 SelectionMode="{Binding SelectionMode}"
-                 Width="250"
-                 Height="350"/>
-
-        <Button Command="{Binding AddItemCommand}">Add</Button>
-
-        <Button Command="{Binding RemoveItemCommand}">Remove</Button>
-
-        <Button Command="{Binding SelectRandomItemCommand}">Select Random Item</Button>
-
-        <ComboBox SelectedIndex="{Binding SelectionMode, Mode=TwoWay}">
-          <ComboBoxItem>Single</ComboBoxItem>
-          <ComboBoxItem>Multiple</ComboBoxItem>
-          <ComboBoxItem>Toggle</ComboBoxItem>
-          <ComboBoxItem>AlwaysSelected</ComboBoxItem>
-        </ComboBox>
-      </StackPanel>
+  <DockPanel>
+    <StackPanel DockPanel.Dock="Top" Margin="4">
+      <TextBlock Classes="h1">ListBox</TextBlock>
+      <TextBlock Classes="h2">Hosts a collection of ListBoxItem.</TextBlock>
     </StackPanel>
-  </StackPanel>
+    <StackPanel DockPanel.Dock="Right" Margin="4">
+      <CheckBox IsChecked="{Binding Multiple}">Multiple</CheckBox>
+      <CheckBox IsChecked="{Binding Toggle}">Toggle</CheckBox>
+      <CheckBox IsChecked="{Binding AlwaysSelected}">AlwaysSelected</CheckBox>
+      <CheckBox IsChecked="{Binding AutoScrollToSelectedItem}">AutoScrollToSelectedItem</CheckBox>
+    </StackPanel>
+    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="4">
+      <Button Command="{Binding AddItemCommand}">Add</Button>
+      <Button Command="{Binding RemoveItemCommand}">Remove</Button>
+      <Button Command="{Binding SelectRandomItemCommand}">Select Random Item</Button>
+    </StackPanel>
+    <ListBox Items="{Binding Items}"
+             Selection="{Binding Selection}"
+             AutoScrollToSelectedItem="{Binding AutoScrollToSelectedItem}"
+             SelectionMode="{Binding SelectionMode}"/>
+  </DockPanel>
 </UserControl>

+ 39 - 12
samples/ControlCatalog/ViewModels/ListBoxPageViewModel.cs

@@ -10,15 +10,30 @@ namespace ControlCatalog.ViewModels
 {
     public class ListBoxPageViewModel : ReactiveObject
     {
+        private bool _multiple;
+        private bool _toggle;
+        private bool _alwaysSelected;
+        private bool _autoScrollToSelectedItem = true;
         private int _counter;
-        private SelectionMode _selectionMode;
+        private ObservableAsPropertyHelper<SelectionMode> _selectionMode;
 
         public ListBoxPageViewModel()
         {
             Items = new ObservableCollection<string>(Enumerable.Range(1, 10000).Select(i => GenerateItem()));
+            
             Selection = new SelectionModel<string>();
             Selection.Select(1);
 
+            _selectionMode = this.WhenAnyValue(
+                x => x.Multiple,
+                x => x.Toggle,
+                x => x.AlwaysSelected,
+                (m, t, a) =>
+                    (m ? SelectionMode.Multiple : 0) |
+                    (t ? SelectionMode.Toggle : 0) |
+                    (a ? SelectionMode.AlwaysSelected : 0))
+                .ToProperty(this, x => x.SelectionMode);
+
             AddItemCommand = ReactiveCommand.Create(() => Items.Add(GenerateItem()));
 
             RemoveItemCommand = ReactiveCommand.Create(() =>
@@ -42,25 +57,37 @@ namespace ControlCatalog.ViewModels
         }
 
         public ObservableCollection<string> Items { get; }
-
         public SelectionModel<string> Selection { get; }
+        public SelectionMode SelectionMode => _selectionMode.Value;
 
-        public ReactiveCommand<Unit, Unit> AddItemCommand { get; }
+        public bool Multiple
+        {
+            get => _multiple;
+            set => this.RaiseAndSetIfChanged(ref _multiple, value);
+        }
 
-        public ReactiveCommand<Unit, Unit> RemoveItemCommand { get; }
+        public bool Toggle
+        {
+            get => _toggle;
+            set => this.RaiseAndSetIfChanged(ref _toggle, value);
+        }
 
-        public ReactiveCommand<Unit, Unit> SelectRandomItemCommand { get; }
+        public bool AlwaysSelected
+        {
+            get => _alwaysSelected;
+            set => this.RaiseAndSetIfChanged(ref _alwaysSelected, value);
+        }
 
-        public SelectionMode SelectionMode
+        public bool AutoScrollToSelectedItem
         {
-            get => _selectionMode;
-            set
-            {
-                Selection.Clear();
-                this.RaiseAndSetIfChanged(ref _selectionMode, value);
-            }
+            get => _autoScrollToSelectedItem;
+            set => this.RaiseAndSetIfChanged(ref _autoScrollToSelectedItem, value);
         }
 
+        public ReactiveCommand<Unit, Unit> AddItemCommand { get; }
+        public ReactiveCommand<Unit, Unit> RemoveItemCommand { get; }
+        public ReactiveCommand<Unit, Unit> SelectRandomItemCommand { get; }
+
         private string GenerateItem() => $"Item {_counter++.ToString()}";
     }
 }