更好买

VPet-Simulator.Core/Display/basestyle.xaml

@@ -116,6 +116,81 @@
         </Setter>
     </Style>
 
+        <Style x:Key="ThemedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
+        <Setter Property="Background" Value="{DynamicResource DARKPrimary}" />
+        <Setter Property="Foreground" Value="{DynamicResource DARKPrimaryText}" />
+        <Setter Property="Padding" Value="10,5" />
+        <Setter Property="pu:ButtonHelper.CornerRadius" Value="5" />
+    </Style>
+
+    <Style x:Key="TextButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryDarker}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="FontSize" Value="12" />
+    </Style>
+
+    <Style x:Key="DARKPrimaryTextButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource TextButtonStyle}">
+        <Setter Property="Foreground" Value="{DynamicResource DARKPrimaryText}" />
+    </Style>
+    
+    <Style x:Key="IconInvertedForegroundRepeatButtonStyle" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource {x:Type RepeatButton}}">
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="25" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource DARKPrimaryText}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="FontSize" Value="15" />
+        <Setter Property="FontFamily" Value="pack://application:,,,/Res/#remixicon" />
+    </Style>
+
+    <Style x:Key="LinkButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource TextButtonStyle}">
+        <Setter Property="ContentTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <TextBlock Text="{Binding}"
+                               TextDecorations="Underline" />
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="StndardToggleButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
+        <Setter Property="Background" Value="{DynamicResource DARKPrimary}" />
+        <Setter Property="pu:ToggleButtonHelper.CheckedBackground" Value="{DynamicResource DARKPrimaryDarker}"/>
+        <Setter Property="Foreground" Value="{DynamicResource DARKPrimaryText}" />
+        <Setter Property="Padding" Value="10,5" />
+        <Setter Property="pu:ButtonHelper.CornerRadius" Value="5" />
+    </Style>
+
+    <Style x:Key="TextToggleButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryDarker}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="FontSize" Value="14" />
+    </Style>
+
+    <Style x:Key="LinkToggleButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource TextToggleButtonStyle}">
+        <Setter Property="ContentTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <TextBlock Text="{Binding}" TextDecorations="Underline" />
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="StandardPaginationStyle" TargetType="{x:Type pu:Pagination}">
+        <Setter Property="Height" Value="25" />
+        <Setter Property="ItemsBackground" Value="{DynamicResource DARKPrimaryTrans4}" />
+        <Setter Property="ItemsSelectedForeground" Value="{DynamicResource DARKPrimaryText}" />
+        <Setter Property="ItemsSelectedBackground" Value="{DynamicResource DARKPrimary}" />
+        <Setter Property="ItemsCornerRadius" Value="2" />
+    </Style>
+
     <Style x:Key="StandardComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
         <Setter Property="FontSize" Value="14" />
         <Setter Property="Height" Value="30" />
@@ -200,6 +275,7 @@
         <Setter Property="pu:MenuHelper.CornerRadius" Value="5" />
         <Setter Property="pu:MenuHelper.TopLevelDropDownPlacement" Value="TopRight" />
         <Setter Property="pu:MenuHelper.TopLevelItemsPadding" Value="15,0" />
+        <Setter Property="pu:MenuHelper.TopLevelItemsHeight" Value="55" />
         <Setter Property="pu:MenuHelper.TopLevelItemsBackground" Value="Transparent" />
         <Setter Property="pu:MenuHelper.TopLevelItemsHoverBackground" Value="{DynamicResource SecondaryLighter}" />
         <Setter Property="pu:MenuHelper.TopLevelItemsHoverForeground" Value="{DynamicResource DARKPrimary}" />

VPet-Simulator.Windows/App.xaml

@@ -2,8 +2,28 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:VPet_Simulator.Windows"
+             xmlns:pu="https://opensource.panuon.com/wpf-ui"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary>
+                    <FontFamily x:Key="MainFont">
+                        /VPet-Simulator.Windows;component/Res/Font/#OPPOSans R
+                    </FontFamily>
+                    <FontFamily x:Key="RemixIcon">
+                        /VPet-Simulator.Windows;component/Res/#remixicon
+                    </FontFamily>
+                </ResourceDictionary>
+                <ResourceDictionary>
+                    <pu:GlobalSettings x:Key="globalSettings"
+                                       FontFamily="{StaticResource MainFont}"
+                                       FontSize="14"
+                                       IconFontFamily="/VPet-Simulator.Windows;component/Res/#remixicon"
+                                       IconFontSize="16" />
+                </ResourceDictionary>
                 <ResourceDictionary Source="/VPet-Simulator.Windows.Interface;component/ResourceStyle.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

VPet-Simulator.Windows/Design/AutoUniformGrid.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Windows;
+using System.Windows.Controls.Primitives;
+
+namespace VPet_Simulator.Windows
+{
+    public class AutoUniformGrid
+   : UniformGrid
+    {
+
+        #region ItemsMinWidth
+        public double ItemsMinWidth
+        {
+            get { return (double)GetValue(ItemsMinWidthProperty); }
+            set { SetValue(ItemsMinWidthProperty, value); }
+        }
+
+        public static readonly DependencyProperty ItemsMinWidthProperty =
+            DependencyProperty.Register("ItemsMinWidth", typeof(double), typeof(AutoUniformGrid), new PropertyMetadata(double.NaN));
+        #endregion
+
+        #region ItemsMinHeight
+        public double ItemsMinHeight
+        {
+            get { return (double)GetValue(ItemsMinHeightProperty); }
+            set { SetValue(ItemsMinHeightProperty, value); }
+        }
+
+        public static readonly DependencyProperty ItemsMinHeightProperty =
+            DependencyProperty.Register("ItemsMinHeight", typeof(double), typeof(AutoUniformGrid), new PropertyMetadata(double.NaN));
+        #endregion
+
+
+        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
+        {
+            base.OnRenderSizeChanged(sizeInfo);
+
+            if (!double.IsNaN(ItemsMinWidth))
+            {
+                var columns = (int)Math.Floor(sizeInfo.NewSize.Width / ItemsMinWidth);
+                SetCurrentValue(ColumnsProperty, columns);
+            }
+            if (!double.IsNaN(ItemsMinHeight))
+            {
+                var rows = (int)Math.Floor(sizeInfo.NewSize.Height / ItemsMinHeight);
+                SetCurrentValue(RowsProperty, rows);
+            }
+        }
+    }
+
+}

VPet-Simulator.Windows/Design/Converters/BoolToIntConverter.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+
+namespace VPet_Simulator.Windows
+{
+    public class BoolToIntConverter
+       : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return (value as bool?) == true ? 1 : 0;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

VPet-Simulator.Windows/Design/Converters/DiscountPriceConverter.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+
+namespace VPet_Simulator.Windows
+{
+    public class DiscountPriceConverter
+         : IMultiValueConverter
+    {
+        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+        {
+            var price = (double)values[0];
+            var discount = (int)values[1];
+            var discountPrice = (price * (discount / 100d));
+            return $"¥ {discountPrice.ToString("0.0")}";
+        }
+
+        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

VPet-Simulator.Windows/VPet-Simulator.Windows.csproj

@@ -113,6 +113,9 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </ApplicationDefinition>
+    <Compile Include="Design\AutoUniformGrid.cs" />
+    <Compile Include="Design\Converters\BoolToIntConverter.cs" />
+    <Compile Include="Design\Converters\DiscountPriceConverter.cs" />
     <Compile Include="WinDesign\winBetterBuy.xaml.cs">
       <DependentUpon>winBetterBuy.xaml</DependentUpon>
     </Compile>
@@ -226,6 +229,9 @@
       <Generator>SettingsSingleFileGenerator</Generator>
       <LastGenOutput>Settings.Designer.cs</LastGenOutput>
     </None>
+    <Resource Include="Res\Font\OPPOSans B.ttf" />
+    <Resource Include="Res\Font\OPPOSans R.ttf" />
+    <Resource Include="Res\remixicon.ttf" />
   </ItemGroup>
   <ItemGroup>
     <None Include="App.config" />

VPet-Simulator.Windows/WinDesign/winBetterBuy.xaml

@@ -1,12 +1,368 @@
-<Window x:Class="VPet_Simulator.Windows.winBetterBuy"
+<pu:WindowX x:Class="VPet_Simulator.Windows.winBetterBuy"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             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:pu="https://opensource.panuon.com/wpf-ui"
             xmlns:local="clr-namespace:VPet_Simulator.Windows"
             mc:Ignorable="d"
-        Title="winBetterBuy" Height="450" Width="800">
+            Title="winBetterBuy"
-    <Grid>
+            Height="450"
-        
+            Width="800"
+            FontSize="14"
+            WindowStartupLocation="CenterScreen"
+            Background="#E0F6FF"
+            pu:WindowXCaption.Height="45"
+            pu:WindowXCaption.Background="{DynamicResource DARKPrimary}"
+            pu:WindowXCaption.Foreground="#FFFFFF"
+            pu:WindowXCaption.Buttons="Close"
+            pu:WindowXCaption.ShadowColor="{DynamicResource ShadowColor}">
+    <pu:WindowXCaption.CloseButtonStyle>
+        <Style TargetType="Button"
+               BasedOn="{StaticResource {x:Static pu:WindowXCaption.CloseButtonStyleKey}}">
+            <Setter Property="Width"
+                    Value="28" />
+            <Setter Property="Height"
+                    Value="28" />
+            <Setter Property="Margin"
+                    Value="0,0,7,0" />
+            <Setter Property="VerticalAlignment"
+                    Value="Center" />
+            <Setter Property="Background"
+                    Value="Transparent" />
+            <Setter Property="pu:ButtonHelper.CornerRadius"
+                    Value="14" />
+            <Setter Property="pu:ButtonHelper.HoverBackground"
+                    Value="White" />
+            <Setter Property="pu:ButtonHelper.ClickBackground"
+                    Value="{x:Null}" />
+            <Setter Property="pu:ButtonHelper.HoverForeground"
+                    Value="{DynamicResource DARKPrimary}" />
+        </Style>
+    </pu:WindowXCaption.CloseButtonStyle>
+    <pu:WindowXCaption.HeaderTemplate>
+        <DataTemplate>
+            <Grid Margin="10,0">
+                <StackPanel Orientation="Horizontal">
+                    <Button Style="{DynamicResource TextButtonStyle}"
+                            Foreground="{DynamicResource DARKPrimaryText}"
+                            Content="更好买"
+                            VerticalAlignment="Center"
+                            FontSize="20" 
+                            Click="BtnTitle_Click"/>
+                    <Grid Grid.Column="1"
+                          Margin="15,0,0,0"
+                          Width="200">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TextBox x:Name="TbTitleSearch"
+                                 Grid.ColumnSpan="2"
+                                 VerticalAlignment="Center"
+                                 Padding="7,0"
+                                 pu:TextBoxHelper.Watermark="搜索商品"
+                                 FontSize="14"
+                                 Background="#33FFFFFF"
+                                 Height="30"
+                                 BorderThickness="0"
+                                 pu:TextBoxHelper.CornerRadius="5"
+                                 Loaded="TbTitleSearch_Loaded"
+                                 Foreground="{DynamicResource DARKPrimaryText}" />
+                        <Button Grid.Column="1"
+                                Margin="0,0,3,0"
+                                VerticalAlignment="Center"
+                                Height="28"
+                                Width="28"
+                                IsDefault="{Binding IsKeyboardFocusWithin, ElementName=TbTitleSearch}"
+                                BorderThickness="0"
+                                pu:ButtonHelper.CornerRadius="0,5,5,0"
+                                Background="Transparent"
+                                FontFamily="pack://application:,,,/Res/#remixicon"
+                                Content="&#xF0D1;"
+                                Padding="0"
+                                Foreground="{DynamicResource DARKPrimaryText}"
+                                FontSize="16"
+                                Cursor="Hand"
+                                Click="BtnSearch_Click" />
                     </Grid>
-</Window>
+
+                </StackPanel>
+            </Grid>
+        </DataTemplate>
+    </pu:WindowXCaption.HeaderTemplate>
+    <Window.Resources>
+        <local:BoolToIntConverter x:Key="BoolToIntConverter" />
+        <local:DiscountPriceConverter x:Key="DiscountPriceConverter" />
+
+        <DataTemplate x:Key="CommodityDataTemplate">
+            <Grid>
+                <pu:CarouselPanel Grid.Column="1"
+                                  Animation="Fade,Flow"
+                                  AnimationDuration="0:0:0.3"
+                                  CurrentIndex="{Binding IsChecked, Converter={StaticResource BoolToIntConverter}, ElementName=TbtnDetail}">
+                    <Border Background="{DynamicResource SecondaryTrans4}"
+                            CornerRadius="5">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+                            <Border Margin="25,0,0,0"
+                                    Width="{Binding ActualHeight, ElementName=BdrImage}" />
+                            <TextBlock Margin="10,7,0,0"
+                                       FontWeight="Bold"
+                                       Grid.ColumnSpan="2"
+                                       TextTrimming="CharacterEllipsis"
+                                       FontSize="16"
+                                       Text="{Binding DisplayName}" />
+                            <Grid Grid.Column="1"
+                                  Margin="0,40,0,10">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <StackPanel Grid.Row="1"
+                                            Orientation="Horizontal">
+                                    <TextBlock x:Name="TxtPrice"
+                                               VerticalAlignment="Bottom"
+                                               TextDecorations="Strikethrough"
+                                               Text="{Binding Price, StringFormat='¥ 0.0'}"
+                                               FontWeight="Bold"
+                                               FontSize="10"
+                                               Foreground="{DynamicResource PrimaryText}" />
+                                    <TextBlock x:Name="TxtDiscountPrice"
+                                               Margin="5,0,0,0"
+                                               FontWeight="Bold"
+                                               FontSize="18"
+                                               Foreground="{DynamicResource DARKPrimary}">
+                                        <TextBlock.Text>
+                                            <MultiBinding Converter="{StaticResource DiscountPriceConverter}">
+                                                <Binding Path="Price" />
+                                                <Binding Path="Discount" />
+                                            </MultiBinding>
+                                        </TextBlock.Text>
+                                    </TextBlock>
+                                </StackPanel>
+                                <Border Grid.Row="3"
+                                        Margin="0,5,0,0"
+                                        HorizontalAlignment="Left"
+                                        Background="{DynamicResource SecondaryTrans}"
+                                        CornerRadius="2">
+                                    <StackPanel Orientation="Horizontal">
+                                        <RepeatButton VerticalAlignment="Center"
+                                                      Content="-"
+                                                      Padding="0,0,0,5"
+                                                      Style="{DynamicResource IconInvertedForegroundRepeatButtonStyle}"
+                                                      Click="RbtnDecrease_Click" />
+                                        <TextBox Grid.Column="1"
+                                                 Cursor="IBeam"
+                                                 Background="#CDFFFFFF"
+                                                 BorderThickness="0"
+                                                 HorizontalContentAlignment="Center"
+                                                 Text="{Binding Quantity}"
+                                                 MinWidth="30" />
+                                        <RepeatButton Grid.Column="2"
+                                                      VerticalAlignment="Center"
+                                                      Content="+"
+                                                      Padding="0,0,0,5"
+                                                      Style="{DynamicResource IconInvertedForegroundRepeatButtonStyle}"
+                                                      Click="RbtnIncrease_Click" />
+                                    </StackPanel>
+                                </Border>
+                                <Button Grid.Row="4"
+                                        Margin="0,7,0,0"
+                                        Padding="7,5"
+                                        Cursor="Hand"
+                                        HorizontalAlignment="Left"
+                                        pu:ButtonHelper.Icon="&#xef60;"
+                                        Style="{DynamicResource ThemedButtonStyle}"
+                                        Content="购买"
+                                        Click="BtnBuy_Click" />
+                            </Grid>
+                        </Grid>
+                    </Border>
+                    <Border Background="{DynamicResource DARKPrimary}"
+                            CornerRadius="5">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+                            <Border Margin="10"
+                                    Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
+                            <Grid Grid.Column="1"
+                                  Margin="0,10,10,0">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <TextBlock VerticalAlignment="Center"
+                                           TextTrimming="CharacterEllipsis"
+                                           FontSize="16"
+                                           Foreground="{DynamicResource DARKPrimaryText}"
+                                           Text="{Binding DisplayName}" />
+                                <TextBlock Grid.Row="1"
+                                           Margin="0,7,0,0"
+                                           TextWrapping="Wrap"
+                                           VerticalAlignment="Center"
+                                           TextTrimming="CharacterEllipsis"
+                                           FontSize="12"
+                                           Foreground="{DynamicResource DARKPrimaryText}"
+                                           Text="{Binding Description}" />
+                            </Grid>
+                        </Grid>
+                    </Border>
+                </pu:CarouselPanel>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition />
+                    </Grid.ColumnDefinitions>
+                    <Border x:Name="BdrImage"
+                            Margin="10,10,0,10"
+                            CornerRadius="5">
+                        <Image Source="{Binding ImageShot}" 
+                               Stretch="UniformToFill"/>
+                    </Border>
+                    <ToggleButton x:Name="TbtnDetail"
+                                  Grid.ColumnSpan="2"
+                                  Margin="0,5,8,0"
+                                  HorizontalAlignment="Right"
+                                  VerticalAlignment="Top"
+                                  Width="30"
+                                  Height="30"
+                                  Padding="0"
+                                  FontSize="22"
+                                  Foreground="{DynamicResource PrimaryText}"
+                                  Background="Transparent"
+                                  ToolTip="物品详情"
+                                  pu:ToggleButtonHelper.CornerRadius="5"
+                                  pu:ToggleButtonHelper.CheckedForeground="{DynamicResource DARKPrimaryText}"
+                                  pu:IconHelper.Margin="0"
+                                  FontFamily="/VPet-Simulator.Windows;component/Res/#remixicon"
+                                  Content="&#xeb47;" />
+                </Grid>
+            </Grid>
+            <DataTemplate.Triggers>
+                <DataTrigger Binding="{Binding Discount}"
+                             Value="100">
+                    <Setter TargetName="TxtPrice"
+                            Property="Foreground"
+                            Value="{DynamicResource DARKPrimary}" />
+                    <Setter TargetName="TxtPrice"
+                            Property="FontSize"
+                            Value="18" />
+                    <Setter TargetName="TxtPrice"
+                            Property="TextDecorations"
+                            Value="None" />
+                    <Setter TargetName="TxtDiscountPrice"
+                            Property="Visibility"
+                            Value="Collapsed" />
+                </DataTrigger>
+            </DataTemplate.Triggers>
+        </DataTemplate>
+    </Window.Resources>
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="200" />
+            <ColumnDefinition />
+        </Grid.ColumnDefinitions>
+        <Border Background="{DynamicResource DARKPrimaryText}" />
+        <Grid Margin="12, 10">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <TextBlock Text="商品分类"
+                       FontSize="18"
+                       Foreground="{DynamicResource DARKPrimary}" />
+            <ListBox x:Name="LsbCategory"
+                     Grid.Row="1"
+                     Margin="-12,10,-12,0"
+                     Background="Transparent"
+                     BorderThickness="0"
+                     SelectedIndex="0"
+                     pu:ListBoxHelper.ItemsPadding="15,8"
+                     pu:ListBoxHelper.ItemsSelectedBackground="{DynamicResource DARKPrimary}"
+                     pu:ListBoxHelper.ItemsSelectedForeground="{DynamicResource DARKPrimaryText}">
+                <ListBoxItem Content="食物" />
+                <ListBoxItem Content="饮料" />
+                <ListBoxItem Content="药品" />
+                <ListBoxItem Content="收藏" />
+            </ListBox>
+            <TextBlock Grid.Row="2"
+                       Text="排序方式"
+                       FontSize="18"
+                       Foreground="{DynamicResource DARKPrimary}" />
+            <Border Grid.Row="3"
+                    Margin="0,10,0,0"
+                    MinHeight="100"
+                    CornerRadius="5">
+                <Grid VerticalAlignment="Top">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <ListBox x:Name="LsbSortRule" Background="Transparent"
+                             BorderThickness="0"
+                             pu:ListBoxHelper.ItemsPadding="10,5"
+                             pu:ListBoxHelper.ItemsCornerRadius="4"
+                             pu:ListBoxHelper.ItemsSelectedBackground="{DynamicResource DARKPrimary}"
+                             pu:ListBoxHelper.ItemsSelectedForeground="{DynamicResource DARKPrimaryText}"
+                             SelectedIndex="0">
+                        <ListBoxItem Content="按价格" />
+                        <ListBoxItem Content="按体力" />
+                        <ListBoxItem Content="按心情" />
+                    </ListBox>
+                    <Rectangle Grid.Column="1"
+                               Margin="10,0,10,0"
+                               Width="1"
+                               Fill="{DynamicResource DARKPrimaryTrans4}" />
+                    <ListBox x:Name="LsbSortAsc"
+                             Grid.Column="2"
+                             Background="Transparent"
+                             BorderThickness="0"
+                             pu:ListBoxHelper.ItemsPadding="10,5"
+                             pu:ListBoxHelper.ItemsCornerRadius="4"
+                             pu:ListBoxHelper.ItemsSelectedBackground="{DynamicResource DARKPrimary}"
+                             pu:ListBoxHelper.ItemsSelectedForeground="{DynamicResource DARKPrimaryText}"
+                             SelectedIndex="0">
+                        <ListBoxItem Content="升序" />
+                        <ListBoxItem Content="降序" />
+                    </ListBox>
+                </Grid>
+            </Border>
+        </Grid>
+        <Grid Margin="10"
+              Grid.Column="1">
+            <ScrollViewer>
+                <ItemsControl x:Name="IcCommodity"
+                              VerticalAlignment="Top">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <local:AutoUniformGrid ItemsMinWidth="250" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <ContentControl Height="140"
+                                            Margin="0,0,10,10"
+                                            Content="{Binding}"
+                                            ContentTemplate="{StaticResource CommodityDataTemplate}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </Grid>
+    </Grid>
+</pu:WindowX>

VPet-Simulator.Windows/WinDesign/winBetterBuy.xaml.cs

@@ -1,10 +1,13 @@
-using System;
+using Panuon.WPF;
+using Panuon.WPF.UI;
+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.Controls.Primitives;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
@@ -17,11 +20,115 @@ namespace VPet_Simulator.Windows
     /// <summary>
     /// winBetterBuy.xaml 的交互逻辑
     /// </summary>
-    public partial class winBetterBuy : Window
+    public partial class winBetterBuy : WindowX
     {
+        private TextBox _searchTextBox;
+
         public winBetterBuy(MainWindow mw)
         {
             InitializeComponent();
+
+            IcCommodity.ItemsSource = new List<BetterBuyItem>()
+            {
+                new BetterBuyItem()
+                {
+                    Name = "商品A",
+                    Description = "一件商品",
+                    ImageShot = new BitmapImage(new Uri("/VPet-Simulator.Windows;component/Res/tony.bmp", UriKind.RelativeOrAbsolute)),
+                },
+                new BetterBuyItem()
+                {
+                    Name = "商品B",
+                    Description = "一件商品",
+                    ImageShot = new BitmapImage(new Uri("/VPet-Simulator.Windows;component/Res/tony.bmp", UriKind.RelativeOrAbsolute)),
+                },
+            };
+        }
+
+        private void RbtnIncrease_Click(object sender, RoutedEventArgs e)
+        {
+            var repeatButton = sender as RepeatButton;
+            var item = repeatButton.DataContext as BetterBuyItem;
+            item.Quantity = Math.Max(1, item.Quantity + 1);
+        }
+
+        private void RbtnDecrease_Click(object sender, RoutedEventArgs e)
+        {
+            var repeatButton = sender as RepeatButton;
+            var item = repeatButton.DataContext as BetterBuyItem;
+            item.Quantity = Math.Max(1, item.Quantity - 1);
+        }
+
+        private void BtnBuy_Click(object sender, RoutedEventArgs e)
+        {
+
+        }
+
+        private void BtnSearch_Click(object sender, RoutedEventArgs e)
+        {
+            Search();
+        }
+
+        private void BtnTitle_Click(object sender, RoutedEventArgs e)
+        {
+            _searchTextBox.Text = "";
+            Search();
+        }
+
+        private void Search()
+        {
+            var searchText = _searchTextBox.Text;
+            var category = LsbCategory.SelectedIndex;
+            var sortRule = LsbSortRule.SelectedIndex;
+            var sortAsc = LsbSortAsc.SelectedIndex == 0;
+            //搜索商品
+        }
+
+        private void TbTitleSearch_Loaded(object sender, RoutedEventArgs e)
+        {
+            _searchTextBox = sender as TextBox;
         }
     }
+
+    public class BetterBuyItem
+        : NotifyPropertyChangedBase
+    {
+        /// <summary>
+        /// 物品图像
+        /// </summary>
+        public ImageSource ImageShot { get; set; }
+        /// <summary>
+        /// 名称
+        /// </summary>
+        public string Name { get; set; }
+        /// <summary>
+        /// 显示名称
+        /// </summary>
+        public string DisplayName { get; set; }
+        /// <summary>
+        /// 物品描述
+        /// </summary>
+        public string Description { get; set; }
+        /// <summary>
+        /// 物品分类
+        /// </summary>
+        public string[] Categories { get; set; }
+        /// <summary>
+        /// 物品价格
+        /// </summary>
+        public double Price { get; set; }
+        /// <summary>
+        /// 商品实际价格
+        /// </summary>
+        public double RealPrice { get; set; }
+        /// <summary>
+        /// 选择的物品个数
+        /// </summary>
+        public int Quantity { get => _quantity; set => Set(ref _quantity, value); }
+        private int _quantity;
+        /// <summary>
+        /// 商品折扣 (100%)
+        /// </summary>
+        public int Discount { get; set; }
+    }
 }