feat: 添加 ListBox 和 ListBoxItem 的自定义控件, 允许 TextBox 设置 CornerRadius

OrgEleCho · Apr 17, 2024 · 8925cdd · 8925cdd
1 parent c01c9a2
commit 8925cdd
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 12 deletions.
diff --git a/EleCho.WpfSuite/Controls/ListBox.cs b/EleCho.WpfSuite/Controls/ListBox.cs
@@ -0,0 +1,39 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace EleCho.WpfSuite
+{
+    public class ListBox : System.Windows.Controls.ListBox
+    {
+        static ListBox()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(ListBox), new FrameworkPropertyMetadata(typeof(ListBox)));
+        }
+
+        public CornerRadius CornerRadius
+        {
+            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
+            set { SetValue(CornerRadiusProperty, value); }
+        }
+
+        protected override DependencyObject GetContainerForItemOverride()
+        {
+            return new ListBoxItem();
+        }
+
+        public static readonly DependencyProperty CornerRadiusProperty =
+            Border.CornerRadiusProperty.AddOwner(typeof(ListBox));
+    }
+}
diff --git a/EleCho.WpfSuite/Controls/ListBoxItem.cs b/EleCho.WpfSuite/Controls/ListBoxItem.cs
@@ -0,0 +1,25 @@
+using System.Windows;
+using System.Windows.Controls;
+
+namespace EleCho.WpfSuite
+{
+    public class ListBoxItem : System.Windows.Controls.ListBoxItem
+    {
+        static ListBoxItem()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(ListBoxItem), new FrameworkPropertyMetadata(typeof(ListBoxItem)));
+        }
+
+        public CornerRadius CornerRadius
+        {
+            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
+            set { SetValue(CornerRadiusProperty, value); }
+        }
+
+
+        public static readonly DependencyProperty CornerRadiusProperty =
+            Border.CornerRadiusProperty.AddOwner(typeof(ListBoxItem));
+
+
+    }
+}
diff --git a/EleCho.WpfSuite/Controls/ListBoxItemResources.xaml b/EleCho.WpfSuite/Controls/ListBoxItemResources.xaml
@@ -0,0 +1,73 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ws="https://github.com/OrgEleCho/EleCho.WpfSuite">
+
+    <Style x:Key="FocusVisual">
+        <Setter Property="Control.Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
+    <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
+    <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
+    <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
+    <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
+    <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
+    <Style TargetType="{x:Type ws:ListBoxItem}">
+        <Setter Property="SnapsToDevicePixels" Value="True"/>
+        <Setter Property="Padding" Value="4,1"/>
+        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
+        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderBrush" Value="Transparent"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ws:ListBoxItem}">
+                    <Border x:Name="Bd"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Padding="{TemplateBinding Padding}"
+                            SnapsToDevicePixels="true">
+                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver" Value="True"/>
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
+                        </MultiTrigger>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="Selector.IsSelectionActive" Value="False"/>
+                                <Condition Property="IsSelected" Value="True"/>
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
+                        </MultiTrigger>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="Selector.IsSelectionActive" Value="True"/>
+                                <Condition Property="IsSelected" Value="True"/>
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
+                        </MultiTrigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/EleCho.WpfSuite/Controls/ListBoxResources.xaml b/EleCho.WpfSuite/Controls/ListBoxResources.xaml
@@ -0,0 +1,51 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ws="https://github.com/OrgEleCho/EleCho.WpfSuite">
+
+    <SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFFFFFFF"/>
+    <SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3"/>
+    <SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF"/>
+    <SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9"/>
+    <Style TargetType="{x:Type ws:ListBox}">
+        <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
+        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
+        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ws:ListBox}">
+                    <Border x:Name="Bd"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Padding="1"
+                            SnapsToDevicePixels="true">
+                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
+                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
+                        </ScrollViewer>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsEnabled" Value="false">
+                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Border}"/>
+                        </Trigger>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsGrouping" Value="true"/>
+                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
+                            </MultiTrigger.Conditions>
+                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
+                        </MultiTrigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/EleCho.WpfSuite/Controls/TextBox.cs b/EleCho.WpfSuite/Controls/TextBox.cs
@@ -22,13 +22,24 @@ static TextBox()
             DefaultStyleKeyProperty.OverrideMetadata(typeof(TextBox), new FrameworkPropertyMetadata(typeof(TextBox)));
         }
 
+
+
+        public CornerRadius CornerRadius
+        {
+            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
+            set { SetValue(CornerRadiusProperty, value); }
+        }
+
         public string Placeholder
         {
             get { return (string)GetValue(PlaceholderProperty); }
             set { SetValue(PlaceholderProperty, value); }
         }
 
 
+        public static readonly DependencyProperty CornerRadiusProperty =
+            Border.CornerRadiusProperty.AddOwner(typeof(TextBox));
+
         public static readonly DependencyProperty PlaceholderProperty =
             DependencyProperty.Register(nameof(Placeholder), typeof(string), typeof(TextBox), new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.AffectsRender));
     }

diff --git a/EleCho.WpfSuite/Controls/TextBoxResources.xaml b/EleCho.WpfSuite/Controls/TextBoxResources.xaml
@@ -18,11 +18,16 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ws:TextBox}">
-                    <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
+                    <Border x:Name="border"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            SnapsToDevicePixels="True">
                         <Grid>
                             <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                             <Border Padding="{TemplateBinding Padding}">
-                                <TextBlock x:Name="PART_Placeholder" 
+                                <TextBlock x:Name="PART_Placeholder"
                                            Text="{TemplateBinding Placeholder}"
                                            TextWrapping="{TemplateBinding TextWrapping}"
                                            Foreground="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"

diff --git a/EleCho.WpfSuite/EleCho.WpfSuite.csproj b/EleCho.WpfSuite/EleCho.WpfSuite.csproj
@@ -24,6 +24,8 @@
     <Page Remove="Controls\ConditionalControlResources.xaml" />
     <Page Remove="Controls\FrameResources.xaml" />
     <Page Remove="Controls\ImageResources.xaml" />
+    <Page Remove="Controls\ListBoxItemResources.xaml" />
+    <Page Remove="Controls\ListBoxResources.xaml" />
     <Page Remove="Controls\ScrollViewerResources.xaml" />
     <Page Remove="Controls\SlicedImageResources.xaml" />
     <Page Remove="Controls\TextBoxResources.xaml" />
@@ -45,6 +47,8 @@
   <ItemGroup>
     <Resource Include="Controls\ButtonResources.xaml" />
     <Resource Include="Controls\FrameResources.xaml" />
+    <Resource Include="Controls\ListBoxItemResources.xaml" />
+    <Resource Include="Controls\ListBoxResources.xaml" />
     <Resource Include="Controls\SlicedImageResources.xaml" />
     <Resource Include="Controls\ToggleButtonResources.xaml" />
     <Resource Include="Controls\TransitioningContentControlResources.xaml">

diff --git a/EleCho.WpfSuite/Themes/Generic.xaml b/EleCho.WpfSuite/Themes/Generic.xaml
@@ -10,5 +10,7 @@
         <ResourceDictionary Source="pack://application:,,,/EleCho.WpfSuite;component/Controls/FrameResources.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/EleCho.WpfSuite;component/Controls/ButtonResources.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/EleCho.WpfSuite;component/Controls/ToggleButtonResources.xaml"/>
+        <ResourceDictionary Source="pack://application:,,,/EleCho.WpfSuite;component/Controls/ListBoxResources.xaml"/>
+        <ResourceDictionary Source="pack://application:,,,/EleCho.WpfSuite;component/Controls/ListBoxItemResources.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
diff --git a/WpfTest/MainWindow.xaml b/WpfTest/MainWindow.xaml
@@ -18,22 +18,29 @@
     </Window.Resources>
 
     <DockPanel>
-        <ListBox Name="AppNavigations"
-                 DockPanel.Dock="Left"
-                 Width="180"
-                 BorderThickness="0 0 1 0"
-                 ItemsSource="{Binding NavigationItems}"
-                 SelectionChanged="ListBox_SelectionChanged">
-            <ListBox.ItemTemplate>
+        <ws:ListBox Name="AppNavigations"
+                    DockPanel.Dock="Left"
+                    Width="180"
+                    BorderThickness="0 0 1 0"
+                    CornerRadius="0 5 5 0"
+                    ItemsSource="{Binding NavigationItems}"
+                    d:ItemsSource="{d:SampleData ItemCount=3}"
+                    SelectionChanged="ListBox_SelectionChanged">
+            <ws:ListBox.ItemContainerStyle>
+                <Style TargetType="ws:ListBoxItem">
+                    <Setter Property="CornerRadius" Value="3"/>
+                </Style>
+            </ws:ListBox.ItemContainerStyle>
+            <ws:ListBox.ItemTemplate>
                 <DataTemplate>
                     <StackPanel>
                         <TextBlock Text="{Binding Title}"
                                    FontSize="14"/>
                         <TextBlock Text="{Binding Description}"/>
                     </StackPanel>
                 </DataTemplate>
-            </ListBox.ItemTemplate>
-        </ListBox>
+            </ws:ListBox.ItemTemplate>
+        </ws:ListBox>
         <ws:Frame Name="AppFrame"
                   NavigationUIVisibility="Visible"
                   ClipToBounds="True">

diff --git a/WpfTest/Tests/TextBoxTestPage.xaml b/WpfTest/Tests/TextBoxTestPage.xaml
@@ -18,7 +18,9 @@
                        Margin="0 0 0 12"/>
             <StackPanel>
                 <TextBlock Text="TextBox:"/>
-                <ws:TextBox Padding="5" Placeholder="{Binding ElementName=PlaceHolderBox,Path=Text}"/>
+                <ws:TextBox Padding="5"
+                            CornerRadius="3"
+                            Placeholder="{Binding ElementName=PlaceHolderBox,Path=Text}"/>
             </StackPanel>
 
             <GroupBox Header="Options"