开发一个简单的购物车界面(.NET CORE(C#) WPF)

先看效果图:

开发一个简单的购物车界面(.NET CORE(C#) WPF)

1、引用MD控件,App.xaml添加样式文件:

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

2、主窗体布局代码:

<Window x:Class="ShoppingCart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
        mc:Ignorable="d" Height="600" Width="1080" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" WindowStyle="None">
    <StackPanel>
        <Grid Height="50" VerticalAlignment="Top" Background="#FF4572A0">
            <Button Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="10 0">
                <materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
            </Button>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="10 0">
                <Button Background="{x:Null}" BorderBrush="{x:Null}">
                    <materialDesign:PackIcon Kind="Account"/>
                </Button>
                <Button Background="{x:Null}" BorderBrush="{x:Null}" Click="Close_Click">
                    <materialDesign:PackIcon Kind="Close"/>
                </Button>
            </StackPanel>
            <TextBlock Text="Design com WPF" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="18"/>
        </Grid>
        <Grid Height="90" VerticalAlignment="Top" Background="#FF679CC9">
            <TextBlock Text="LOGO" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20" FontSize="30" Foreground="White" FontFamily="Stencil" />
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBox materialDesign:HintAssist.Hint="SEARCH" Foreground="White" Width="600" FontSize="20"/>
                <materialDesign:PackIcon Kind="Magnify" Foreground="White" Width="25" Height="25" VerticalAlignment="Center" Margin="5"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="50 0" VerticalAlignment="Center">
                <materialDesign:PackIcon Kind="Cart" Foreground="White" Width="25" Height="25" VerticalAlignment="Center" Margin="5"/>
                <TextBlock Foreground="White" FontSize="18" Text="5" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
        <Grid Margin="20" VerticalAlignment="Top" Background="White" Height="420">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="20" ShadowDepth="1"/>
            </Grid.Effect>
            <Image Source="Assets/92886_179403_1.jpg" HorizontalAlignment="Left" Margin="150 0"/>
            <ListView Width="80" HorizontalAlignment="Left" Margin="80 50">
                <ListViewItem Width="60" Height="60">
                    <Image Source="Assets/92886_179403_1.jpg" Stretch="UniformToFill"/>
                </ListViewItem>
                <ListViewItem Width="60" Height="60">
                    <Image Source="Assets/92886_179403_2.jpg" Stretch="UniformToFill"/>
                </ListViewItem>
                <ListViewItem Width="60" Height="60">
                    <Image Source="Assets/92886_179403_3.jpg" Stretch="UniformToFill"/>
                </ListViewItem>
                <ListViewItem Width="60" Height="60">
                    <Image Source="Assets/92886_179403_4.jpg" Stretch="UniformToFill"/>
                </ListViewItem>
                <ListViewItem Width="60" Height="60">
                    <Image Source="Assets/92886_179403_5.jpg" Stretch="UniformToFill"/>
                </ListViewItem>
            </ListView>
            <StackPanel Margin="750 70 70 70" HorizontalAlignment="Left">
                <TextBlock Text="BOYS' NIKE TEAM HUSTLE" FontSize="18" Margin="0 5" Foreground="#FF6A6A6A"/>
                <TextBlock Text="D8 10.5-3 BASKETBALL SHOES" FontSize="22" TextWrapping="Wrap" Foreground="#FF6A6A6A"/>
                <TextBlock Text="item #75684" FontSize="8" Margin="0 5" Foreground="#FFC7C7C7"/>
                <TextBlock Text="$ 95.99" FontSize="20" Margin="0 15" Foreground="#FFC7C7C7"/>
                <Grid Width="200">
                    <ComboBox materialDesign:HintAssist.Hint="SIZE" Padding="7" Background="#FF4572A0" Foreground="White" Margin="0 15" HorizontalAlignment="Left" Width="80">
                        <ComboBoxItem Content="11"/>
                        <ComboBoxItem Content="11.5"/>
                        <ComboBoxItem Content="12"/>
                        <ComboBoxItem Content="12.5"/>
                    </ComboBox>
                    <ComboBox materialDesign:HintAssist.Hint="QTY" IsEditable="True" Padding="7" Margin="0 15" HorizontalAlignment="Right" Width="80">
                        <ComboBoxItem Content="1"/>
                        <ComboBoxItem Content="2"/>
                        <ComboBoxItem Content="3"/>
                        <ComboBoxItem Content="4"/>
                    </ComboBox>
                </Grid>
                <Button Background="#FF4572A0" BorderBrush="#FF4572A0" Content="SHOP NOW" Margin="0 20"/>
            </StackPanel>
        </Grid>
    </StackPanel>
</Window>

后台关闭窗体及移动窗体方法:

private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    DragMove();
}

private void Close_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

参考视频:C# WPF Material Design UI: Shopping Cart

源码下载: ShoppingCart

注:演示中使用的部分图片可从上面源码中获取。

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/7421.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

登录后才能评论