WPF 设置圆角窗体,通过ListView模拟下拉组合款

发布时间 2023-05-27 15:26:48作者: 安静点--

界面:

<Window x:Class="WpfApp2.MainWindow"
        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:local="clr-namespace:WpfApp2"
        mc:Ignorable="d" WindowStyle="None"  OpacityMask="White" AllowsTransparency="True" ResizeMode="NoResize" MouseDown="Window_MouseDown"  
        Title="MainWindow" Height="650" Width="530"  WindowStartupLocation="CenterOwner"  Background="Transparent">
    <Window.Resources>
        <!--<Style TargetType="Window" x:Key="RoundedCornerWindowStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Window">
                        <Border  Background="White" CornerRadius="15" Opacity="0.8">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>-->

        <Style TargetType="Image" x:Key="Image_Style">
            <Setter Property="Width" Value="50"></Setter>
            <Setter Property="Height" Value="50"></Setter>
            <Setter Property="Clip">
                <Setter.Value>
                    <EllipseGeometry RadiusX="25" RadiusY="25" Center="25,25"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Border" x:Key="Border_Style">
            <Setter Property="Width" Value="385"></Setter>
            <Setter Property="BorderBrush" Value="Gray"></Setter>
            <Setter Property="CornerRadius" Value="10"></Setter>
            <Setter Property="BorderThickness" Value="0.5"></Setter>
            <Setter Property="Margin" Value="10"></Setter>
        </Style>
        <Style TargetType="TextBlock" x:Key="TextBlock_Base_Style">
            <Setter Property="FontSize" Value="18"></Setter>
        </Style>
        <Style x:Key="Title_Style" TargetType="TextBlock" BasedOn="{StaticResource ResourceKey=TextBlock_Base_Style}" >
            <Setter Property="FontWeight" Value="Bold"></Setter>
            <Setter Property="Foreground" Value="#232b6e"></Setter>
        </Style>
        <Style x:Key="Text_Style" TargetType="TextBlock" BasedOn="{StaticResource ResourceKey=TextBlock_Base_Style}" >

            <Setter Property="Foreground" Value="#6269a5"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid Background="Transparent">
            <Border BorderThickness="5" BorderBrush="White" CornerRadius="10,10,10,10"  Name="top">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <!--<TextBlock x:Name="EntListWelcome1" Text="< 返回" HorizontalAlignment="Left" FontSize="15" Height="34"  />
                <TextBlock x:Name="EntListWelcome" Text="EntListWelcome" HorizontalAlignment="Left" FontSize="15" Height="34" Width="345" FontWeight="Bold"/>
                <TextBlock x:Name="EntListIntroduce" Text="EntListIntroduce" HorizontalAlignment="Left" Margin="0,-42,0,0" VerticalAlignment="Top" Width="400"/>-->

            </Grid>
            <Border Style="{StaticResource ResourceKey=Border_Style}"   Grid.Row="1"  >
                <StackPanel>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                    </Grid>
                    <Grid Grid.Row="0" Height="85" Background="Transparent">
                        <Image HorizontalAlignment="Left" Margin="20 0 0 0" VerticalAlignment="Center" Style="{StaticResource ResourceKey=Image_Style}"  Source="/model_.png"   />
                        <TextBlock  Style="{StaticResource ResourceKey=Title_Style}"      HorizontalAlignment="Left" Margin="100 0 0 0" VerticalAlignment="Center" Text="标题1" Width="50"  />
                        <TextBlock x:Name="ShowEnterpriseAccount"  Margin="0 0 15 0"  MouseLeftButtonDown="ShowEnterpriseAccount_MouseDown" HorizontalAlignment="Right" VerticalAlignment="Center" Text=">" FontSize="20"/>
                        <TextBlock x:Name="HideEnterpriseAccount" Visibility="Collapsed" MouseLeftButtonDown="HideEnterpriseAccount_MouseLeftButtonDown"  HorizontalAlignment="Right" VerticalAlignment="Center" Text="∨" Margin="0 0 10 0" FontSize="20"/>
                    </Grid>
                    <Grid  Grid.Row="1" Background="Transparent">
                        <ListView x:Name="EnterpriseAccount_ListView" Margin="25 0 0 10"   Visibility="Visible" Width="340"   Height="200"  BorderThickness="0"   >
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Height="60">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="200"/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <!--<Image Source="{Binding ImageUrl}" Width="50" Height="50" Margin="5"/>-->
                                        <Image Style="{StaticResource ResourceKey=Image_Style}"  Width="50" Height="50" Source="{Binding ImageUrl}" >
                                        </Image>
                                        <TextBlock Margin="20 0 0 0" Grid.Column="1" Text="{Binding Name}"  Style="{StaticResource ResourceKey=Title_Style}"  />
                                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="20 25 0 0"  Style="{StaticResource ResourceKey=Text_Style}"   Text="{Binding Name}"    />
                                        <TextBlock Grid.Column="2" VerticalAlignment="Center" Foreground="#484e86" Text=">" FontSize="20"/>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </StackPanel>
            </Border>
            <Border Style="{StaticResource ResourceKey=Border_Style}"  Grid.Row="2">
                <StackPanel>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                    </Grid>
                    <Grid Grid.Row="0" Height="85" Background="Transparent">
                        <Image HorizontalAlignment="Left" Margin="20 0 0 0" VerticalAlignment="Center" Style="{StaticResource ResourceKey=Image_Style}"  Source="/model_.png"   />
                        <TextBlock  HorizontalAlignment="Left" Margin="100 0 0 0" VerticalAlignment="Center" Text="标题2" Width="50"  Style="{StaticResource ResourceKey=Title_Style}"    />
                        <TextBlock x:Name="ShowPersonAccount" Foreground="#484e86"   Margin="0 0 15 0"  MouseLeftButtonDown="ShowPersonAccount_MouseLeftButtonDown" HorizontalAlignment="Right" VerticalAlignment="Center" Text=">" FontSize="20"/>
                        <TextBlock x:Name="HidePersonAccount" Visibility="Collapsed" MouseLeftButtonDown="HidePersonAccount_MouseLeftButtonDown"  HorizontalAlignment="Right" VerticalAlignment="Center" Text="∨" Foreground="#484e86"  Margin="0 0 10 0" FontSize="20"/>
                    </Grid>
                    <Grid  Grid.Row="1" Background="Transparent">
                        <ListView x:Name="list_view_person" Margin="25 0 0 10"   Visibility="Visible" Width="340"   Height="200"  BorderThickness="0"   d:ItemsSource="{d:SampleData ItemCount=3}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Height="60">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="200"/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <!--<Image Source="{Binding ImageUrl}" Width="50" Height="50" Margin="5"/>-->
                                        <Image Style="{StaticResource ResourceKey=Image_Style}"  Width="50" Height="50" Source="/model_.png" >
                                        </Image>
                                        <TextBlock Margin="20 0 0 0" Grid.Column="1" Text="标题1_deteail" Style="{StaticResource ResourceKey=Title_Style}"  />
                                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="20 25 0 0"  Style="{StaticResource ResourceKey=Text_Style}" Text="测试客户"  />
                                        <TextBlock Grid.Column="2" VerticalAlignment="Center" Text=">"  Foreground="#484e86"  FontSize="20"/>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</Window>

后台:

   /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            EnterpriseAccount_ListView.ItemsSource = new List<EtpListInfoJson> { new EtpListInfoJson() {
                ImageUrl= "https://bkimg.cdn.bcebos.com/
pic/a6efce1b9d16fdfaaf51d41cfbda9b5494eef11fcdbe?x-bce-process=image/resize,m_lfit,w_536,limit_1
", Name = "12", }, new EtpListInfoJson() { ImageUrl= "pack://application:,,,/WpfApp2;Component/11.png", Name = "ss", }, new EtpListInfoJson() { ImageUrl= "pack://application:,,,/WpfApp2;Component/11.png", Name = "ss21", }, new EtpListInfoJson() { ImageUrl= "pack://application:,,,/WpfApp2;Component/11.png", Name = "fd", }, }; } private void Button_Click(object sender, RoutedEventArgs e) { EnterpriseAccount_ListView.Visibility = Visibility.Visible; } private void Grid_MouseDown(object sender, MouseButtonEventArgs e) { EnterpriseAccount_ListView.Visibility = Visibility.Visible; } private void ShowEnterpriseAccount_MouseDown(object sender, MouseButtonEventArgs e) { HideEnterpriseAccount.Visibility = Visibility.Visible; ShowEnterpriseAccount.Visibility = Visibility.Collapsed; EnterpriseAccount_ListView.Visibility = Visibility.Visible; } private void HideEnterpriseAccount_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { ShowEnterpriseAccount.Visibility = Visibility.Visible; HideEnterpriseAccount.Visibility = Visibility.Collapsed; EnterpriseAccount_ListView.Visibility = Visibility.Collapsed; } private void ShowPersonAccount_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { } private void HidePersonAccount_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { } private void Window_MouseDown(object sender, MouseButtonEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { DragMove(); } } }

效果: