WPF 实现类似Windows设置窗体

最新推荐文章于 2023-10-21 20:34:36 发布

Danny_hi

最新推荐文章于 2023-10-21 20:34:36 发布

阅读量506

点赞数

分类专栏： WPF

本文链接：https://blog.csdn.net/qq_43024228/article/details/107215909

版权

WPF 专栏收录该内容

114 篇文章 38 订阅

订阅专栏

WPF 实现类似Windows设置窗体

一、对比效果如下（鼠标进去也会有边框）：
在这里插入图片描述

二、主窗体xaml代码：

<Window x:Class="WPFTest0708.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:WPFTest0708"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate x:Key="IconTemplate">
            <Border BorderThickness="2" Background="Transparent" Cursor="Hand">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" Value="LightGray"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding Icon}" Grid.RowSpan="2" FontFamily="Wingdings" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="48" Foreground="Blue"/>
                    <TextBlock Text="{Binding Title}" Grid.Column="1" VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding Text}" Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" Foreground="Gray"/>
                </Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <!--<ContentControl Width="300" Height="100" ContentTemplate="{StaticResource IconTemplate}">
            <local:ItemModel Icon="&#x003A;" Title="文件" Text="有关详细信息，请查看列表；"></local:ItemModel>
        </ContentControl>-->
        <ListBox Margin="50" ItemsSource="{Binding}" Name="thisListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="{Binding ElementName=thisListBox,Path=ActualWidth}"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter ContentTemplate="{StaticResource IconTemplate}" Margin="20"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>
    </Grid>
</Window>

主窗体后台代码：

namespace WPFTest0708
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var ItemsList = new ObservableCollection<ItemModel>();
            ItemsList.Add(new ItemModel()
            {
                Icon = Encoding.UTF8.GetString(new byte[] { 0x003A }),
                Title = "文件",
                Text = "有关详细信息，请查看列表；"
            });
            ItemsList.Add(ItemsList[0]);
            ItemsList.Add(ItemsList[0]);
            ItemsList.Add(ItemsList[0]);
            ItemsList.Add(ItemsList[0]);
            ItemsList.Add(ItemsList[0]);
            ItemsList.Add(ItemsList[0]);

            this.DataContext = ItemsList;
        }
    }
}

三、ItemModel类代码：

public class ItemModel
    {
        public string Icon { get; set; }
        public string Title { get; set; }
        public string Text { get; set; }
    }