在uwp仿制WPF的Window

移植WPF软件到uwp时碰到用作对话框的Window有多种处理选择。我个人认为最省事的是用ContentDialog模拟Window。

比如你想把上面这个WPF窗体弄到uwp里面去

1.修改ContentDialog的默认样式

新建一个模板化控件RoundCornerContentDialog

让它继承ContentDialog。

然后去Windows SDK里面翻默认样式(因为vs2015 update 1无法自动提取ContentDialog的默认样式到Xaml)。

我的电脑上默认样式在这个文件夹

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic

找到之后打开刚才新建这个控件时的Themes\Generic.xaml

把ContentDialog的默认样式换进去。

由于要移植的对话框是圆角的,而且没有在底部放置额外的按钮,ContentDialog的样式需要修改。我把它改成了这样:

XAML

<Style TargetType="local:RoundCornerContentDialog" >
        <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="BorderThickness" Value="3" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}"/>
        <Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
        <Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
        <Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
        <Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RoundCornerContentDialog">
                    <Border x:Name="Container">
                        <Grid x:Name="LayoutRoot">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="BackgroundElement"
                                FlowDirection="{TemplateBinding FlowDirection}"
                                MaxWidth="{TemplateBinding MaxWidth}"
                                MaxHeight="{TemplateBinding MaxHeight}"
                                MinWidth="{TemplateBinding MinWidth}"
                                MinHeight="{TemplateBinding MinHeight}" >
                                <Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ScrollViewer x:Name="ContentScrollViewer"
                                        HorizontalScrollBarVisibility="Disabled"
                                        VerticalScrollBarVisibility="Disabled"
                                        ZoomMode="Disabled"
                                        IsTabStop="False">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <ContentControl x:Name="Title"
                                                Margin="{ThemeResource ContentDialogTitleMargin}"
                                                Content="{TemplateBinding Title}"
                                                ContentTemplate="{TemplateBinding TitleTemplate}"
                                                FontSize="20"
                                                FontFamily="XamlAutoFontFamily"
                                                FontWeight="Normal"
                                                Foreground="{TemplateBinding Foreground}"
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Top"
                                                IsTabStop="False"
                                                MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
                                                <ContentControl.Template>
                                                    <ControlTemplate TargetType="ContentControl">
                                                        <ContentPresenter
                                                            Content="{TemplateBinding Content}"
                                                            MaxLines="2"
                                                            TextWrapping="Wrap"
                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                            Margin="{TemplateBinding Padding}"
                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                    </ControlTemplate>
                                                </ContentControl.Template>
                                            </ContentControl>
                                            <ContentPresenter x:Name="Content"
                                                Background="{TemplateBinding Background}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                BorderBrush="{ThemeResource ContentDialogBorderThemeBrush}"
                                                CornerRadius="20"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Content="{TemplateBinding Content}" VerticalContentAlignment="Stretch"
                                                FontSize="{ThemeResource ControlContentThemeFontSize}"
                                                FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                                Foreground="{TemplateBinding Foreground}"
                                                Grid.Row="1"
                                                TextWrapping="Wrap" />
                                        </Grid>
                                    </ScrollViewer>
                                    <Grid x:Name="CommandSpace" Visibility="Collapsed" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <Border x:Name="Button1Host"
                                            Margin="{ThemeResource ContentDialogButton1HostMargin}"
                                            MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                            MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                            Height="{ThemeResource ContentDialogButtonHeight}"
                                            HorizontalAlignment="Stretch" />
                                        <Border x:Name="Button2Host"
                                            Margin="{ThemeResource ContentDialogButton2HostMargin}"
                                            MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                            MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                            Height="{ThemeResource ContentDialogButtonHeight}"
                                            Grid.Column="1"
                                            HorizontalAlignment="Stretch" />
                                    </Grid>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

2.添加DragMove方法

需要移植的那个WPF窗口是可以在空白处进行拖动的。

通过输入指针的事件收集信息,对ContentDialog的Margin属性进行更改达到模拟拖动的效果。

子类调用DragMove方法启用拖动。

下面是VB代码示例。需要其它语言示例的话可以用SharpDevelop转换。

VB

    Protected Sub DragMove(ptr As Pointer)
        Pressed = True
        CapturePointer(ptr)
    End Sub

    Dim Pressed As Boolean
    Dim pos As Point
    Private Sub RoundCornerContentDialog_PointerMoved(sender As Object, e As PointerRoutedEventArgs) Handles Me.PointerMoved
        If Pressed Then
            Dim pt = e.GetCurrentPoint(Me).Position
            Dim marg = Margin
            Dim ofsx = pt.X - pos.X
            Dim ofsy = pt.Y - pos.Y
            marg.Left += ofsx
            marg.Right -= ofsx
            marg.Top += ofsy
            marg.Bottom -= ofsy
            Margin = marg
        End If
    End Sub

    Private Sub RoundCornerContentDialog_PointerReleased(sender As Object, e As PointerRoutedEventArgs) Handles Me.PointerReleased
        Pressed = False
        ReleasePointerCapture(e.Pointer)
    End Sub

    Private Sub RoundCornerContentDialog_PointerPressed(sender As Object, e As PointerRoutedEventArgs) Handles Me.PointerPressed
        pos = e.GetCurrentPoint(Me).Position
    End Sub

3.把对话框内容加进去

新建一个ContentDialog,并把Xaml根节点的名称改为刚才建立的local:RoundCornerContentDialog,还要在相应的类里面把基类也改成RoundCornerContentDialog。

注意,加入内容时要考虑照顾小屏幕设备和低性能设备。

我把布局改了一下,按钮的视觉效果也去除了。

4.在合适的位置调用DragMove

在你认为表示非客户区中可拖动部分的控件的PointerPressed调用DragMove

VB

Private Sub RectDrag_PointerPressed(sender As Object, e As PointerRoutedEventArgs) Handles RectDrag.PointerPressed
    DragMove(e.Pointer)
End Sub

5.其它功能的模拟

有些对话框需要拖动改变大小之类复杂的功能。这个可以仿照WPF的自定义处理非客户区碰撞检测消息进行编写。

以后我遇到需要实现这个功能的时候会补上这里的代码。

时间: 2024-12-11 07:47:03

在uwp仿制WPF的Window的相关文章

UWP 和 WPF 对比

原文:UWP 和 WPF 对比 本文告诉大家 UWP 和 WPF 的不同. 如果在遇到技术选择或者想和小伙伴吹的时候可以让他以为自己很厉害,那么请继续看. 如果在看这文章还不知道什么是 UWP 和 WPF 那么也没关系,下面会告诉大家. 实际上 Universal Windows Platform (UWP) 和 Windows Presentation Foundation (WPF) 是不相同的,虽然都可以做界面和桌面开发,但是 UWP 是一个新的 UI 框架,而且 UWP 是支持很多平台,

[WPF自定义控件]?Window(窗体)的UI元素及行为

原文:[WPF自定义控件]?Window(窗体)的UI元素及行为 1. 前言 本来打算写一篇<自定义Window>的文章,但写着写着发觉内容太多,所以还是把使用WindowChrome自定义Window需要用到的部分基础知识独立出来,于是就形成了这篇文章. 无论是桌面编程还是日常使用,Window(窗体)都是最常接触的UI元素之一,既然Window这么重要那么多了解一些也没有坏处. 2.标准Window 这篇文章主要讨论标准的Window,不包括奇形怪状的无边框.非矩形Window,即只讨论W

vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方案

 #Region "WPF 当浏览器窗口关闭时触发 Quit事件 " #If OnSourceInitialized Then Protected Overrides Sub OnSourceInitialized(e As EventArgs) 'onload 等句柄创建后引用WSInitialized(Me, e) WSInitialized(Me, e) MyBase.OnSourceInitialized(e) End Sub #Else Private Sub LyWeb

vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式

 #Region "WPF 当浏览器窗体关闭时触发 Quit事件 " #If OnSourceInitialized Then Protected Overrides Sub OnSourceInitialized(e As EventArgs) 'onload 等句柄创建后引用WSInitialized(Me, e) WSInitialized(Me, e) MyBase.OnSourceInitialized(e) End Sub #Else Private Sub LyWeb

WPF:window设置单一开启

方法一: Window window = new Window();window.ShowDialog; 方法二: 设置一个判断窗口打开状态的全局控制变量 private bool isOpened = false; private void Button_Click(object sender, RoutedEventArgs e) { if (!isOpened) { isOpened = true; Window window = new Window(); window.IsVisibl

【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio 2019 版本 16.4 和 16.5 Preview 1中,我们希望借此机会回顾一下全年的新变化.如果您错过了我们以前的版本,或者只是没有机会赶上,那么此博客文章将是您可以看到我们在整个2019年所做的每项重大改进的地方. XAML实时调试工具: XAML C# Edit & Continue 现

【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio 2019 版本 16.4 和 16.5 Preview 1中,我们希望借此机会回顾一下全年的新变化.如果您错过了我们以前的版本,或者只是没有机会赶上,那么此博客文章将是您可以看到我们在整个2019年所做的每项重大改进的地方. XAML实时调试工具: XAML C# Edit & Continue 现

从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能

前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史)……所以我们这次就要在看似好玩的 UWP 多窗口实现背后,挖掘一些我们也是首次接触的干活“新鲜热辣”地放松给大家.希望能使大家在想要将自己的 APP 开新窗口的时候,能从本文中得到一些启发,而不是总是发现 C# 关于 UWP 开新窗口可供参考的文章只有 Is it possible to open

[WPF自定义控件]从ContentControl开始入门自定义控件

原文:[WPF自定义控件]从ContentControl开始入门自定义控件 1. 前言 我去年写过一个在UWP自定义控件的系列博客,大部分的经验都可以用在WPF中(只有一点小区别).这篇文章的目的是快速入门自定义控件的开发,所以尽量精简了篇幅,更深入的概念在以后介绍各控件的文章中实际运用到才介绍. ContentControl是WPF中最基础的一种控件,Window.Button.ScrollViewer.Label.ListBoxItem等都继承自ContentControl.而且Conten