在WPF中使用Prism彈出自定義窗體樣式的對話框

来源:https://www.cnblogs.com/chonglu/archive/2022/11/17/16901274.html
-Advertisement-
Play Games

摘要 在Prism中彈出一個對話框,預設是一個Windows預設樣式的視窗,會與自己所開發的項目完全不搭配,例如下麵這樣子 如果為了迎合軟體主體風格,可以做出類似這樣效果 其實原理也很簡單,Prism也考慮到了這一點,所以特意設計一個供用戶自定義的介面 編寫組件樣式 1、新建一個Window視圖 註 ...


摘要

在Prism中彈出一個對話框,預設是一個Windows預設樣式的視窗,會與自己所開發的項目完全不搭配,例如下麵這樣子

image-20221117220506922

如果為了迎合軟體主體風格,可以做出類似這樣效果

image-20221117220600218

其實原理也很簡單,Prism也考慮到了這一點,所以特意設計一個供用戶自定義的介面

image-20221117221614166

編寫組件樣式

1、新建一個Window視圖

image-20221117220658589

註意Window里的一些必要屬性記得設置一下,比如SizeToContent ShowInTaskbar等等實現無邊框還是使用常規WindowChrome做法

<WindowChrome.WindowChrome>
        <WindowChrome
            CaptionHeight="60"
            CornerRadius="0"
            GlassFrameThickness="0" />
    </WindowChrome.WindowChrome>

其中CaptionHeight表示可以拖拽的高度,這裡一般建議與自己所設計的高度一致,關於WindowChrome相關用法和介紹就不過多贅述,具體可前往MSDN文檔:WindowChrome 類

2、根據自己需求或設計圖重寫該窗體樣式,XAML太多就不一一介紹了,直接上代碼

<Window
    x:Class="WPF_PrismCustomDialogStyle_Demo.Components.DialogWindowView"
    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:local="clr-namespace:WPF_PrismCustomDialogStyle_Demo.Components"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="{Binding Title}"
    Width="800"
    Height="450"
    ResizeMode="NoResize"
    SizeToContent="WidthAndHeight"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    mc:Ignorable="d">
    <Window.Resources>
        <!--  畫刷  -->
        <SolidColorBrush x:Key="DialogBackgroundColor" Color="#040D14" />
        <SolidColorBrush x:Key="DialogBorderBrushColor" Color="#6C83A4" />
        <SolidColorBrush x:Key="DialogTitleColor" Color="#90CFFF" />
        <ImageBrush x:Key="DialogTitleImageBrush" ImageSource="/WPF_PrismCustomDialogStyle_Demo;component/Assets/Images/dialog_heder_bg.png" />
        <LinearGradientBrush x:Key="TitleTextGradientColor" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="1" Color="#A5BCF3" />
            <GradientStop Offset="0" Color="White" />
        </LinearGradientBrush>

        <!--  字體  -->
        <FontFamily x:Key="TitleFontFamily">/WPF_PrismCustomDialogStyle_Demo;component/Assets/Fonts/#龐門正道標題體3.0</FontFamily>

        <!--  對話框標題樣式  -->
        <Style x:Key="SystemTitleStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="FontSize" Value="15" />
            <Setter Property="FontFamily" Value="{StaticResource TitleFontFamily}" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Foreground" Value="{StaticResource TitleTextGradientColor}" />
        </Style>

        <!--  按鈕樣式  -->
        <Style x:Key="IconButtonBaseStyle" TargetType="Button">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <TextBlock
                            x:Name="icon"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="{TemplateBinding FontSize}"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{TemplateBinding Content}" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="icon" Property="Foreground" Value="#90CFFF" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Window.Style>
        <Style TargetType="{x:Type Window}">
            <Setter Property="ShowInTaskbar" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <Border
                            Background="{StaticResource DialogBackgroundColor}"
                            BorderBrush="{StaticResource DialogBorderBrushColor}"
                            BorderThickness="2">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="60" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>

                                <Border Background="{StaticResource DialogTitleImageBrush}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock
                                            Margin="10,0,0,0"
                                            HorizontalAlignment="Left"
                                            Foreground="{StaticResource DialogTitleColor}"
                                            Style="{StaticResource SystemTitleStyle}"
                                            Text="{TemplateBinding Title}" />
                                        <StackPanel
                                            Grid.Column="2"
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Center"
                                            Orientation="Horizontal"
                                            WindowChrome.IsHitTestVisibleInChrome="True">
                                            <Button
                                                Margin="0,0,20,0"
                                                Command="ApplicationCommands.Close"
                                                Content="x"
                                                Cursor="Hand"
                                                FontSize="30"
                                                FontWeight="Medium"
                                                Foreground="White"
                                                Style="{StaticResource IconButtonBaseStyle}" />
                                        </StackPanel>
                                    </Grid>
                                </Border>


                                <ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Style>
    <WindowChrome.WindowChrome>
        <WindowChrome
            CaptionHeight="60"
            CornerRadius="0"
            GlassFrameThickness="0" />
    </WindowChrome.WindowChrome>
</Window>

Tips:因為一般對話框分為標題欄和主體部分,所以我們可以使用Grid分為兩行,第一行是標題,第二行是內容,使用ContentPresenter來承載要顯示的用戶控制項

image-20221117221322709

使用組件

1、將自定義的樣式組件註入到IOC容器

protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.Register<IDialogWindow, DialogWindowView>(nameof(DialogWindowView));
        }

2、使用DialogService彈出對話框

private void CustomOpenDialog()
        {
            DialogParameters dialogParameters = new DialogParameters()
            {
                {"Title",$"傲慢與偏見 {DateTime.Now:yyyy-MM-dd}" }
            };
            dialogService.Show(nameof(TestDialogView), dialogParameters, result =>
            {

            }, nameof(DialogWindowView));
        }

這段與傳統打開彈框是差不多,唯一不同的就是使用到了一個可傳入WindowName的重載函數,Tips:我們自定義的這個組件(DialogWindowView)是一定需要註入到IOC容器的,不然拿不到這個實例就會拋出異常,另外還有一個點就是該組件還需繼承自IDialogWindow

image-20221117221957369

效果

1

源碼

點我跳轉Github下載源代碼

若Github被牆不方便下載,可留下郵箱發給你


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 創建第一個springmvc程式 1、創建父項目文件,導入依賴,刪除src文件夾 pom.xml文件 <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</ ...
  • 算術運算符 +(加) -(減) *(乘) /(除) %(取餘) ++(自增) --(自減) 註意:/(除):兩個整數相除,其結果一定是整數,小數位電腦自動略去 例: int num1 = 15; int num2 = 4; 1. int result = num1/num2; system.out ...
  • 目錄 一.簡介 1.freeglut 2.glew 3.glut 4.glfw 5.glad 二.分類 1.視窗管理 2.函數載入 三.組合使用 1.freeglut + glew 2.glfw + glew 3.glfw + glad 四.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : O ...
  • 繼承: 強調類與類之間的關係 組合: 強調對象和對象之間的關係 清楚python支持多繼承,從而涉及到一些MRO的點,這裡不做贅述,在實際工作過程中,我們經常會使用繼承來實現代碼復用,如果僅僅是為了復用,還是比較推薦使用組合方式,因為繼承方式,使得類與類之間的耦合性變得異常緊密,這多少違背了迪米特法 ...
  • 故事背景 最近同事遇到一個比較奇怪的問題,直接開門見山吧。在動態庫中調用靜態庫直接報錯了recompile with -fPIC,查看cmake的寫法也沒有問題,而且也是第一次遇見這個問題,所以就開啟了我的好奇之路。 探索之路 說實話我不喜歡百度,因為千篇一律,你抄我的我抄你的,沒有任何參考價值,直 ...
  • 一、序言 在日常一線開發過程中,總有列表轉樹的需求,幾乎是項目的標配,比方說做多級菜單、多級目錄、多級分類等,有沒有一種通用且跨項目的解決方式呢?幫助廣大技術朋友給業務瘦身,提高開發效率。 本文將基於Java8的Lambda 表達式和Stream等知識,使用TreeUtils工具類實現一行代碼完成列 ...
  • 面試官: 小伙子,我看你簡歷上寫的項目中用到了線程池,你知道線程池是怎樣實現復用線程的? 這面試官是不是想坑我?是不是擺明瞭不讓我通過? 難道你不應該問線程池有哪些核心參數?每個參數具體作用是什麼? ...
  • 一 演算法複雜度 演算法複雜度分為時間複雜度和空間複雜度。時間複雜度是指執行演算法所需要的計算工作量;而空間複雜度是指執行這個演算法所需要的記憶體空間。 演算法的複雜性體運行該演算法時的電腦所需資源的多少,電腦資源最重要的是時間和空間(即寄存器)資源,因此複雜度分為時間和空間複雜度。 二 時間複雜度 2.1 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項,你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋,幫助你快速理解並應用這一功能。 先上效果: 在 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 概述:本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定,以及使用語言管理器類,應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活,便於維護,同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • 描述(做一個簡單的記錄): 事件(event)的本質是一個委托;(聲明一個事件: public event TestDelegate eventTest;) 委托(delegate)可以理解為一個符合某種簽名的方法類型;比如:TestDelegate委托的返回數據類型為string,參數為 int和 ...
  • 1、AOT適合場景 Aot適合工具類型的項目使用,優點禁止反編 ,第一次啟動快,業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 總說周知,UWP 是運行在沙盒裡面的,所有許可權都有嚴格限制,和沙盒外交互也需要特殊的通道,所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型,本身是沒有什麼許可權管理的,許可權管理全靠 App Container 沙盒控制,如果我們脫離了這個沙盒,UWP 就會放飛自我了。那麼有沒... ...
  • 目錄條款17:讓介面容易被正確使用,不易被誤用(Make interfaces easy to use correctly and hard to use incorrectly)限制類型和值規定能做和不能做的事提供行為一致的介面條款19:設計class猶如設計type(Treat class de ...
  • title: 從零開始:Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • 1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...