快捷導(dǎo)航

WPF實(shí)現(xiàn)自定義窗體的示例代碼

更新時(shí)間：2023年09月05日 09:18:11 作者：卓爾不設(shè)凡

.Net默認(rèn)的窗體樣式只有四種,而且都比較“丑”,但是很多時(shí)候,我們希望自定義窗體,比如,無邊框,有陰影等,所以本文為大家介紹了WPF實(shí)現(xiàn)自定義窗體的方法,希望對大家有所幫助

一、使用WindowChrome

WindowChrome，可以翻譯為：窗體裝飾條，官方文檔中的定義是：表示一個(gè)對象，它描述窗口非工作區(qū)區(qū)域的自定義。（官方鏈接：WindowChrome 類 (System.Windows.Shell) | Microsoft Learn）

在官方的解釋中，窗口由兩部分構(gòu)成：客戶區(qū)域，非客戶區(qū)域。

圖中，Client Area表示客戶區(qū)域；其他的部分，統(tǒng)稱為非客戶區(qū)域。

那么WindowChrome的作用是，將客戶區(qū)域擴(kuò)展至整個(gè)窗體（遮住了非客戶區(qū)），同時(shí)提供部分標(biāo)準(zhǔn)窗體的功能。如下所示：

<Window x:Class="ControlTest.WindowNone"
        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:ControlTest"
        mc:Ignorable="d"
        Title="WindowNone" Height="450" Width="800">
    <!-- WindowChrome將客戶區(qū)域擴(kuò)展至整個(gè)窗體，并遮住標(biāo)題欄、按鈕等-->
    <WindowChrome.WindowChrome>
        <WindowChrome />
    </WindowChrome.WindowChrome>
    <Grid>
        <TabControl>
            <TabItem Header="項(xiàng)目"/>
            <TabItem Header="代碼"/>
        </TabControl>
    </Grid>
</Window>

備注：這里的邊框，是TabControl的邊框，不是窗體的邊框。

用上WindowChrome后，會(huì)驚奇的發(fā)現(xiàn)：在原標(biāo)題欄的位置，可以用鼠標(biāo)拖動(dòng)了；在窗體的四周，可以調(diào)整窗體的大小了！Amazing！

但同時(shí)，又出現(xiàn)了一個(gè)新的問題：窗體中的所以內(nèi)容，都不能交互（鼠標(biāo)點(diǎn)擊，用戶輸入）了。

這是為什么呢？可以這樣理解。WindowChrome就像一個(gè)圖層，它將窗體整個(gè)覆蓋住了。因此窗體上的內(nèi)容，自然就操作不了。那要如何才能點(diǎn)擊呢？

這需要給交互控件，添加WindowChrome的附件屬性：IsHitTestVisibleInChrome。如下所示。

<Grid>
    <!-- 使用WindowChrome的附件屬性 -->
    <TabControl WindowChrome.IsHitTestVisibleInChrome="True">
        <TabItem Header="項(xiàng)目"/>
        <TabItem Header="代碼"/>
    </TabControl>
</Grid>

如果你以為這樣就萬事大吉了，那只能說太天真了，微軟的東西，哪有那么簡單的呢？？哈哈~

如果真的按照這個(gè)代碼，你會(huì)發(fā)現(xiàn)，又不能使用鼠標(biāo)拖動(dòng)窗體了。這是為什么呢？明明之前都可以，為何為控件添加了一個(gè)附加屬性后，就不行了呢？

問題肯定出在WindowChrome上。那么我們再來看看WindowChrome：

圖中有顏色的區(qū)域，實(shí)際上均為透明的，看不見的。此處附上顏色則是為了方便解釋。

這個(gè)圖就是WindowChrome的模型。其中Caption區(qū)域，表示標(biāo)題欄，就是它，允許窗體被鼠標(biāo)拖動(dòng)。GlassFrameThickness就是Aero窗體的透明邊框（Aero主體只在部分操作系統(tǒng)中支持）。ResizeBorderThickness就是調(diào)整窗體大小的邊框的粗細(xì)，它提供了使用鼠標(biāo)調(diào)整窗體大小的功能。而CornerRadius，則將窗體變成了圓角，它只有在GlassFrameThickness = 0 或者未啟用Aero主體的窗口中才有效。。

再回到上面的問題，為什么添加了附加屬性，就不能用鼠標(biāo)拖動(dòng)窗體了呢？

原因在于，TabControl進(jìn)入了Caption區(qū)域。因?yàn)樵O(shè)置了附加屬性（IsHitTestVisibleInChrome），表示鼠標(biāo)可以“擊穿”WindowChrome，那么自然就無法“點(diǎn)擊”到Caption區(qū)域，自然就無法拖動(dòng)窗體了。

那么如果解決這個(gè)問題呢？以及如何添加按鈕呢？答案是手動(dòng)添加標(biāo)題欄。哈哈~ 如下代碼所示：

Xaml代碼：

<Window x:Class="ControlTest.WindowNone"
        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:ControlTest"
        mc:Ignorable="d"
        Title="WindowNone" Height="450" Width="800">
    <!-- WindowChrome將客戶區(qū)域擴(kuò)展至整個(gè)窗體，并遮住標(biāo)題欄、按鈕等 -->
    <WindowChrome.WindowChrome>　　　　　<!-- 設(shè)置了標(biāo)題欄的高度 = 30，圓角 = 20 -->
        <WindowChrome CaptionHeight="30" CornerRadius="20" GlassFrameThickness="0"/>
    </WindowChrome.WindowChrome>
    <Border BorderThickness="1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border Height="30" Background="YellowGreen">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="Button">
                            <Setter Property="Width" Value="30"/>
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="0"/>
                        </Style>
                    </Grid.Resources>
                    <StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
                        <Image />
                        <TextBlock VerticalAlignment="Center" Margin="3,0" Text="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" WindowChrome.IsHitTestVisibleInChrome="True">
                        <Button Content="_" Click="Btn_Min"/>
                        <Button Content="Max" Click="Btn_Max"/>
                        <Button Content="X" Click="Btn_Close"/>
                    </StackPanel>
                </Grid>
            </Border>
            <!-- 使用WindowChrome的附件屬性 -->
            <TabControl Grid.Row="1" WindowChrome.IsHitTestVisibleInChrome="True">
                <TabItem Header="項(xiàng)目"/>
                <TabItem Header="代碼"/>
            </TabControl>
        </Grid>
    </Border>
</Window>

C# 代碼：

public partial class WindowNone : Window
{
    public WindowNone()
    {
        InitializeComponent();
    }
    // 最小化
    private void Btn_Min(object sender, RoutedEventArgs e)
    {
        this.WindowState = WindowState.Minimized;
    }
　　// 最大化、還原
    private void Btn_Max(object sender, RoutedEventArgs e)
    {
        if(this.WindowState == WindowState.Normal)
        {
            this.WindowState = WindowState.Maximized;
        }
        else
        {
            this.WindowState = WindowState.Normal;
        }
    }
　　// 關(guān)閉窗體
    private void Btn_Close(object sender, RoutedEventArgs e)
    {
        this.Close();
    }
}

手動(dòng)添加了標(biāo)題欄之后，在標(biāo)題欄上，你就可以放上任何你放的東西。。。。

二、使用WindowStyle = "None"

將窗體的WindowStyle屬性設(shè)置為None后，窗體呈現(xiàn)這樣：

<Window x:Class="ControlTest.NoneWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        mc:Ignorable="d"
        Title="NoneWindow" Height="450" Width="800"
        WindowStyle="None">
    <Grid>
        <TabControl>
            <TabItem Header="項(xiàng)目"/>
            <TabItem Header="代碼"/>
        </TabControl>
    </Grid>
</Window>

這里，你會(huì)發(fā)現(xiàn)，窗體可以通過鼠標(biāo)調(diào)整大小，但是不能用鼠標(biāo)拖動(dòng)。那解決的辦法是什么呢？同樣是手動(dòng)設(shè)置一個(gè)標(biāo)題欄：

Xaml 代碼：

<Window x:Class="ControlTest.NoneWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        mc:Ignorable="d"
        Title="NoneWindow" Height="450" Width="800"
        WindowStyle="None" BorderThickness="0" BorderBrush="Transparent">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Height="30" Background="YellowGreen"
                MouseDown="TitleMove">
            <Grid>
                <Grid.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Width" Value="30"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="0"/>
                    </Style>
                </Grid.Resources>
                <StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
                    <Image />
                    <TextBlock VerticalAlignment="Center" Margin="3,0" Text="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" WindowChrome.IsHitTestVisibleInChrome="True">
                    <Button Content="_" Click="Btn_Min"/>
                    <Button Content="Max" Click="Btn_Max"/>
                    <Button Content="X" Click="Btn_Close"/>
                </StackPanel>
            </Grid>
        </Border>
        <TabControl Grid.Row="1" Margin="10">
            <TabItem Header="項(xiàng)目"/>
            <TabItem Header="代碼"/>
        </TabControl>
    </Grid>
</Window>

C# 代碼：

public partial class NoneWindow : Window
    {
        public NoneWindow()
        {
            InitializeComponent();
        }
        // 窗體移動(dòng)
        private void TitleMove(object sender, MouseButtonEventArgs e)
        {
            if (e.ChangedButton != MouseButton.Left) return;            // 非左鍵點(diǎn)擊，退出
            if (e.ClickCount == 1)
            {
                this.DragMove();                                        // 拖動(dòng)窗體
            }
            else
            {
                WindowMax();                                            // 雙擊時(shí)，最大化或者還原窗體
            }
        }
        // 最小化
        private void Btn_Min(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Minimized;
        }
        // 關(guān)閉窗體
        private void Btn_Close(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
        // 最大化、還原
        private void Btn_Max(object sender, RoutedEventArgs e)
        {
            WindowMax();
        }
        private void WindowMax()
        {
            if (this.WindowState == WindowState.Normal)
            {
                this.WindowState = WindowState.Maximized;
            }
            else
            {
                this.WindowState = WindowState.Normal;
            }
        }
    }