对比MFC资源文件谈谈WPF布局方式

时间：2023-03-09 05:54:25
对比MFC资源文件谈谈WPF布局方式

对比MFC资源文件谈谈WPF布局方式

MFC方式

对于传统的MFC基于UI的应用程序设计通常分两步走，首先是设计UI，使用的是RC文件，然后是代码文件，对RC文件进行操作，如下面Figure 1 的基于对话框的应用程序，其对应的代码如Figure 2所示，这就是MFC时代的所见即所得，如大家所见，每个控件的代码都和位置都是写死的坐标，这样会带来的问题是当你改变系统运行的的DPI或者软件需要支持本地化的时候，由于有的语言对于同样的意思需要比较长的文字表示，就会带来文字显示不下或者显示不完整的情况。解决问题的方式想必大家都遇见过，手动的去拖拽控件的大小，然后再在不同的语言的系统上进行测试，整个过程异常繁琐，而且错误百出。

对比MFC资源文件谈谈WPF布局方式

Figure 1 MFC对话框 UI设计

IDD_MAINWIDNOW DIALOGEX , , ,

STYLE DS_SYSMODAL | DS_SETFONT | DS_SETFOREGROUND | DS_FIXEDSYS | DS_CENTER | WS_MINIMIZEBOX | WS_POPUP | WS_CAPTION | WS_SYSMENU

CAPTION "SendMessage"

MENU IDC_SENDMESSAGE

CLASS "SendMessage"

FONT , "MS Shell Dlg", , , 0x1

BEGIN

    CONTROL         ,IDC_CAPTURE,"Static",SS_BITMAP,,,,

    GROUPBOX        "Message",IDC_STATIC,,,,

    COMBOBOX        IDC_WINDOWSMESSAGE,,,,,CBS_DROPDOWNLIST | CBS_SORT | WS_VSCROLL | WS_TABSTOP

    EDITTEXT        IDC_LPARAM,,,,,ES_AUTOHSCROLL

    EDITTEXT        IDC_WPARAM,,,,,ES_AUTOHSCROLL

    LTEXT           "Results from window:",IDC_STATIC,,,,

    EDITTEXT        IDC_RESULTS,,,,,ES_MULTILINE | ES_AUTOHSCROLL | ES_READONLY | NOT WS_BORDER

    PUSHBUTTON      "Send message",IDC_SENDMESSAGE,,,,

    GROUPBOX        "Window",IDC_STATIC,,,,

    CONTROL         "Message:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    CONTROL         "wParam:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    CONTROL         "lParam:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    CONTROL         "Handle:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    EDITTEXT        IDC_WINDOW_HANDLE,,,,,ES_AUTOHSCROLL

    CONTROL         "Window name:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    EDITTEXT        IDC_WINDOW_NAME,,,,,ES_AUTOHSCROLL

    EDITTEXT        IDC_WINDOW_CLASS,,,,,ES_AUTOHSCROLL

    CONTROL         "Window class:",IDC_STATIC,"Static",SS_SIMPLE | WS_GROUP,,,,,WS_EX_RIGHT

    PUSHBUTTON      "Highlight Window",IDC_HIGHLIGHT_WINDOW,,,,

END

Figure 2 MFC对话框 UI代码

WPF方式

微软当然知道传统MFC程序的问题，终极的解决方案就是WPF布局，WPF的主流的最简单的布局方式有一下5种。

-Canvas
-StackPanel
-WrapPanel
-DockPanel
-Grid
举例来说DockPanel，简单的几行代码，对5个button进行了布局，大家可以看到，整个布局过程没有一个坐标，这样带来的还出就是改变窗口大小或者DPI，国际化，都不需要任何额外的工作，生活如此美好。

<Window x:Class="WpfApp.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Hi There！" Height="" Width="">

<DockPanel>

<Button DockPanel.Dock=" Top" Background=" pink" > (Top)</Button>

<Button DockPanel.Dock=" Left" Background=" Orange" > (Left)</Button>

<Button DockPanel.Dock=" Right" Background=" Yellow" > (Right)</Button>

<Button DockPanel.Dock=" Bottom" Background=" Lime" > (Bottom)</Button>

<Button Background=" Aqua" ></Button>

</DockPanel>

</Window>

　　Figure 3 简单WPF布局方式

对比MFC资源文件谈谈WPF布局方式

Figure 4 简单WPF布局方式效果图

当然WPF的能力不止于此，应用WPF完全可以做出基于MFC没办法做出来，或者很难做出来的效果，而且极其简单明了，这就是框架的力量，下面我们来看一个稍微复杂点的例子，当然这样的例子在网上随处可见，不作为奇，但是已经可以说明一定的问题。我们先来看看效果图，然后是源代码。

对比MFC资源文件谈谈WPF布局方式

Figure 5 一个稍微复杂的WPF布局方式效果图

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Hi There!"

    >

	<DockPanel>

		<Menu DockPanel.Dock="Top">

			<MenuItem Header="File"/>

			<MenuItem Header="Edit"/>

			<MenuItem Header="View"/>

			<MenuItem Header="Project"/>

			<MenuItem Header="Build"/>

			<MenuItem Header="Data"/>

			<MenuItem Header="Tools"/>

			<MenuItem Header="Window"/>

			<MenuItem Header="Community"/>

			<MenuItem Header="Help"/>

		</Menu>

		<StackPanel Name="buttonBar" Orientation="Horizontal" DockPanel.Dock="Right">

			<StackPanel.LayoutTransform>

				<RotateTransform Angle="90"/>

			</StackPanel.LayoutTransform>

			<Button Name="pane1Button" MouseEnter="pane1Button_MouseEnter">

				Toolbox

			</Button>

			<Button Name="pane2Button" MouseEnter="pane2Button_MouseEnter">

				Solution Explorer

			</Button>

		</StackPanel>

		<Grid Name="parentGrid" Grid.IsSharedSizeScope="True">

			<Grid Name="layer0" MouseEnter="layer0_MouseEnter">

				<!-- Define four rows: -->

				<Grid.RowDefinitions>

					<RowDefinition Height="Auto"/>

					<RowDefinition/>

					<RowDefinition/>

					<RowDefinition/>

				</Grid.RowDefinitions>

				<!-- Define two columns: -->

				<Grid.ColumnDefinitions>

					<ColumnDefinition Width="Auto"/>

					<ColumnDefinition/>

				</Grid.ColumnDefinitions>

				<Label    Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Blue" Foreground="White"

						  HorizontalContentAlignment="Center">

					<Label.LayoutTransform>

						<ScaleTransform ScaleX="2" ScaleY="2" />

					</Label.LayoutTransform>

					SolidMango

				</Label>

				<GroupBox Grid.Row="1" Grid.Column="0" Background="White"

						  Header="Recent Projects">...</GroupBox>

				<GroupBox Grid.Row="2" Grid.Column="0" Background="White"

						  Header="Getting Started">...</GroupBox>

				<GroupBox Grid.Row="3" Grid.Column="0" Background="White" Header="Headlines">...</GroupBox>

				<GroupBox Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Background="White" Header="Online Articles">

					<ListBox>

						<ListBoxItem>Item #1</ListBoxItem>

                        <ListBoxItem>Item #2</ListBoxItem>

                        <ListBoxItem>Item #3</ListBoxItem>

                        <ListBoxItem>Item #4</ListBoxItem>

					</ListBox>

				</GroupBox>

			</Grid>

			<Grid Name="layer1" Visibility="Collapsed">

				<Grid.ColumnDefinitions>

					<ColumnDefinition/>

					<ColumnDefinition SharedSizeGroup="column1" Width="auto"/>

				</Grid.ColumnDefinitions>

				<Grid Grid.Column="1" MouseEnter="pane1_MouseEnter"

	Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" >

					<Grid.RowDefinitions>

						<RowDefinition Height="auto"/>

						<RowDefinition/>

					</Grid.RowDefinitions>

					<DockPanel Grid.Row="0">

						<Button Width="26" Name="pane1Pin" DockPanel.Dock="Right" Click="pane1Pin_Click" Background="White">

							<Image Name="pane1PinImage" Source="pinHorizontal.gif"/>

						</Button>

						<TextBlock Padding="8" TextTrimming="CharacterEllipsis" Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}" DockPanel.Dock="Left">Toolbox</TextBlock>

					</DockPanel>

					<ListBox Padding="10" Grid.Row="1">

						<ListBoxItem>Button</ListBoxItem>

						<ListBoxItem>CheckBox</ListBoxItem>

						<ListBoxItem>ComboBox</ListBoxItem>

						<ListBoxItem>Label</ListBoxItem>

						<ListBoxItem>ListBox</ListBoxItem>

					</ListBox>

				</Grid>

				<GridSplitter Width="5" Grid.Column="1" HorizontalAlignment="Left"/>

			</Grid>

			<Grid Name="layer2" Visibility="Collapsed">

				<Grid.ColumnDefinitions>

					<ColumnDefinition/>

					<ColumnDefinition SharedSizeGroup="column2" Width="auto"/>

				</Grid.ColumnDefinitions>

				<Grid Grid.Column="1" MouseEnter="pane2_MouseEnter" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}">

					<Grid.RowDefinitions>

						<RowDefinition Height="auto"/>

						<RowDefinition Height="auto"/>

						<RowDefinition/>

					</Grid.RowDefinitions>

					<DockPanel Grid.Row="0">

						<Button Width="26" Name="pane2Pin" DockPanel.Dock="Right" Click="pane2Pin_Click" Background="White">

							<Image Name="pane2PinImage" Source="pinHorizontal.gif"/>

						</Button>

						<TextBlock Padding="8" TextTrimming="CharacterEllipsis" Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}" DockPanel.Dock="Left">Solution Explorer</TextBlock>

					</DockPanel>

					<ToolBar Grid.Row="1">

						<Button>

							<Image Source="iconVSproperties.bmp"/>

						</Button>

						<Button>

							<Image Source="iconVSshowall.bmp"/>

						</Button>

						<Button>

							<Image Source="iconVSrefresh.bmp"/>

						</Button>

					</ToolBar>

					<TreeView Grid.Row="2">

						<TreeViewItem Header="My Solution">

							<TreeViewItem Header="Project #1"/>

							<TreeViewItem Header="Project #2"/>

							<TreeViewItem Header="Project #3"/>

						</TreeViewItem>

					</TreeView>

				</Grid>

				<GridSplitter Width="5" Grid.Column="1" HorizontalAlignment="Left"/>

			</Grid>

		</Grid>

	</DockPanel>

</Window>

　　

　　Figure 6 一个稍微复杂的WPF布局方式源代码

总结

对比两种UI设计方式，读者不难看出，WPF对于UI设计的优越性是MFC RC方式无可匹敌的，无论是从生产力还是界面的美观性上来讲，差一代的技术，差的还是很明显的，WPF的UI设计方式受HTML的启发，在里面能看到很多的HTML的影子，当年微软以一个轻量级的WPF--silverlight 剑指 HTML，虽然silverlight 已经一败涂地，但是WPF仍然是Windows UI 设计的首选。