65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Blend 自定义 Silverlight ChildWindow 样式

2011 年 1 月 9 日

CPOL

7分钟阅读

viewsIcon

94161

downloadIcon

630

在本文中,我将通过一个示例应用程序引导您完成自定义步骤。我们将需要 Microsoft Expression Blend 来进行完全自定义。阅读完整文章以了解相关内容。

引言

您是否在使用 Silverlight 中的 Child Window,并希望自定义外观和感觉以匹配您的应用程序 UI?那么这篇文章将帮助您理解这个过程。我将详细地与您讨论自定义步骤,以便下次您需要修改 Child Window UI 时,会觉得它非常有用。

在本文中,我将通过一个示例应用程序引导您完成自定义步骤。我们将需要 Microsoft Expression Blend 来进行完全自定义。阅读完整文章以了解相关内容。

设置基本项目

打开您的 Expression Blend,通过指定正确的名称、位置和目标版本来创建一个新的“Silverlight 应用程序”项目。单击“确定”,IDE 将为您创建 Silverlight 项目。

image

项目准备就绪后,选择 LayoutRoot,然后在工具箱中,单击下方屏幕截图所示的下拉箭头

image

这将为您打开搜索工具箱选项卡。搜索“ChildWindow”并选择它。请注意,ChildWindowSystem.Windows.Controls.dll 程序集的一部分。

image

现在,在下方屏幕截图所示的 LayoutRoot Grid 中绘制 ChildWindow

image

这将在您的 XAML 页面中添加 ChildWindow。适当调整其大小,以便在运行应用程序时看起来不错。

image

现在让我们运行应用程序,看看默认的 Child Window。它看起来不太好,对吧?是的,这是 Silverlight ChildWindow 的默认外观。现在,我们需要通过编辑控件的模板来对其进行自定义。

image

编辑 ChildWindow 模板

让我们打开 Blend IDE,然后在对象选项卡下的 ChildWindow 控件上单击鼠标右键。在上下文菜单中,选择“编辑模板”,然后在第二级上下文菜单中,单击“编辑副本...”菜单项。

请记住,第一次时,您必须单击“编辑副本...”菜单项。但是,一旦您返回到此屏幕并希望自定义现有模板,您必须单击“编辑当前”菜单项。

image

这将打开屏幕上的“创建样式资源”对话框。为您的新样式命名,并选择样式资源的存储位置。现在单击“确定”开始修改模板。

image

您将在 Blend IDE 中看到以下模板,其中包含几个 Border 控件和 Grid。它还包含一些额外的控件。我们现在将讨论它们,以便您能够正确理解它,并且将来您会发现自定义非常容易。

image

Root Grid 中,我们还有两个名为“Overlay”和“ContentRoot”的 Grid。Overlay Grid 控件实际上创建了半透明背景,使 ChildWindow 成为模态对话框。模态对话框意味着,当 Child Window 打开时,您无法单击外部的任何控件。

ContentRoot Grid 包含 5 个不同的 Border 控件。前四个 Border 控件用于创建 Child Window 的边框阴影。如果您想更改窗口的阴影,可以相应地修改它们。

目前,我们不关心阴影。我们将自定义窗口的其他部分。

image

如果展开第五个 Border 控件,您将在其中看到多个级别的 Grid 和 Border 控件。

image

如下方屏幕截图所示,您将看到所选 Grid 中有两个 Border。Grid 控件有两个行。在第一行,我们有一个名为“Chrome”的 Border 控件。这是您的 Child Window 的标题栏。

不想更改名为“Chrome”的 Border 的名称。如果重命名或删除它,您将无法在应用程序 UI 中拖动 Child Window。

在第二行,我们有实际的内容占位符,用于在窗口内显示任何内容。

image

修改样式

选择名为“Chrome”的 Border 控件。现在从属性面板中,根据您的要求更改背景颜色。为您的标题栏设置渐变画笔。

image

展开 Chrome 控件,选择放置在标题栏中的 CloseButton。通过指定按钮的高度和宽度来设置更大的尺寸。将光标类型设置为“Hand”。

image

您还可以更改关闭按钮的模板。正如您对 Child Window 所做的那样,右键单击 CloseButton 控件。您会看到“编辑模板”的“编辑当前”子菜单项已启用。这意味着样式已经可用,您无需从头开始创建。

单击“编辑当前”,它将在屏幕上打开按钮的模板。

image

如下方屏幕截图所示,选择标记为“X”的路径控件并设置其高度和宽度。您也可以从此屏幕更改关闭按钮的颜色和其他外观。您还可以为其添加一些动画,用于鼠标悬停或按下状态。

image

现在您可以更改内容控件的外观和感觉,该控件包含 Child Window 的标题。

image

选择内容控件的主 Border 控件,并根据您的 UI 样式为其设置背景颜色。设置不同的前景色,使标题与栏背景相匹配。

image

运行应用程序,您将看到 Child Window 的漂亮 UI。现在这显示了一个非模态窗口。要将 Child Window 作为模态窗口运行,您需要从代码隐藏打开该控件。

image

修改代码以显示 Child Window

现在,从 LayoutRoot 中,删除我们在修改样式之前刚刚添加的 ChildWindow。IDE 中的 UI 将如下所示

image

在 Layout root 中添加一个按钮并命名控件。查看下方屏幕截图

image

现在打开代码隐藏文件,并在构造函数中的 InitializeComponent() 调用之后添加按钮的单击事件处理程序。通过指定键从页面资源中获取自定义 Child Window 的样式,并将其存储在成员变量中。代码如下

image

在按钮单击事件实现中,通过指定高度、宽度和内容来创建一个 ChildWindow。还要为其指定样式,并调用 Show() 方法来打开 Child Window。

运行您的应用程序,您将在屏幕上看到该按钮。单击“显示消息”按钮,您将看到 Child Window 弹出在屏幕上,如下所示

image

您可以看到背景控件被一个半透明的黑色图层包裹着。因此,您的窗口变成了一个模态窗口,您将无法单击窗口区域之外的任何地方。

那么,这里的问题是:我们能否更改半透明图层的颜色?是的,我们可以。我在本文前面已经提到过,“Overlay” Border 可以为您做到这一点。请确保不要更改模板中任何控件的名称。

打开 XAML 代码并找到名称“OverlayBrush”。您可以在 XAML 代码中找到它

image

OverlayBrush 的值更改为您选择的适当颜色代码。让我们添加一种蓝色。将值替换为“#7F000055”,如下所示

image

让我们再次运行它。单击“显示消息”按钮以在屏幕上显示 Child Window。嘿,您会注意到,这次背景颜色看起来有点蓝色,符合我们的要求。

image

演示代码

完整的 XAML 代码如下

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk 
	xmlns:d=http://schemas.microsoft.com/expression/blend/2008 
	xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 
	mc:Ignorable="d"
x:Class="ChildWindowCustomizationDemo.MainPage"
Width="640" Height="480">
  <UserControl.Resources>
  <Style x:Key="ChildWindowStyle1" TargetType="sdk:ChildWindow">
	<Setter Property="IsTabStop" Value="false"/>
	<Setter Property="TabNavigation" Value="Cycle"/>
	<Setter Property="HorizontalAlignment" Value="Center"/>
	<Setter Property="VerticalAlignment" Value="Center"/>
	<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
	<Setter Property="VerticalContentAlignment" Value="Stretch"/>
	<Setter Property="BorderThickness" Value="1"/>
	<Setter Property="BorderBrush">
	<Setter.Value>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
		<GradientStop Color="#FFA3AEB9" Offset="0"/>
		<GradientStop Color="#FF8399A9" Offset="0.375"/>
		<GradientStop Color="#FF718597" Offset="0.375"/>
		<GradientStop Color="#FF617584" Offset="1"/>
		</LinearGradientBrush>
	</Setter.Value>
	</Setter>
	<Setter Property="OverlayBrush" Value="#7F000055"/>
	<Setter Property="OverlayOpacity" Value="1"/>
	<Setter Property="Template">
		<Setter.Value>
		<ControlTemplate TargetType="sdk:ChildWindow">
		<Grid x:Name="Root">
		<Grid.Resources>
			<Style x:Key="ButtonStyle" TargetType="Button">
			<Setter Property="Background" Value="#FF1F3B53"/>
			<Setter Property="Foreground" Value="#FF000000"/>
			<Setter Property="Padding" Value="3"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush">
				<Setter.Value>
				<LinearGradientBrush EndPoint="0.5,1" 
					StartPoint="0.5,0">
				<GradientStop Color="#FFA3AEB9" 
				Offset="0"/>
				<GradientStop Color="#FF8399A9" 
				Offset="0.375"/>
				<GradientStop Color="#FF718597" 
				Offset="0.375"/>
				<GradientStop Color="#FF617584" 
				Offset="1"/>
				</LinearGradientBrush>
				</Setter.Value>
			</Setter>
			<Setter Property="Template">
				<Setter.Value>
				<ControlTemplate TargetType="Button">
					<Grid x:Name="grid" Background="#02FFFFFF" 
					HorizontalAlignment="Center" Height="14" 
					VerticalAlignment="Center" Width="15">
					<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="CommonStates">
					<VisualState x:Name="Normal"/>
					<VisualState x:Name="MouseOver">
					    <Storyboard>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty=
							"Visibility" 
						Storyboard.TargetName="X_Fuzz2">
						<DiscreteObjectKeyFrame KeyTime="0" 
						Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty=
							"Visibility" 
						Storyboard.TargetName="X_Fuzz1">
						<DiscreteObjectKeyFrame KeyTime="0" 
						Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty=
							"Visibility" 
						Storyboard.TargetName="X_Fuzz0">
						<DiscreteObjectKeyFrame KeyTime="0" 
							Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimation 
						Duration="0" To="0.95" 
						Storyboard.TargetProperty="Opacity" 
						Storyboard.TargetName="X"/>
					    </Storyboard>
					</VisualState>
					<VisualState x:Name="Pressed">
					    <Storyboard>
						<DoubleAnimation Duration="0" 
						To="0.85" 
						Storyboard.TargetProperty="Opacity" 
						Storyboard.TargetName="X"/>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty="
						Visibility" Storyboard.TargetName=
						"X_Fuzz2">
						<DiscreteObjectKeyFrame KeyTime="0" 
						Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty="
						Visibility" Storyboard.TargetName=
						"X_Fuzz1">
						<DiscreteObjectKeyFrame KeyTime="0" 
						Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetProperty="
						Visibility" Storyboard.TargetName=
						"X_Fuzz0">
						<DiscreteObjectKeyFrame KeyTime="0" 
						Value="Visible"/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
					</VisualState>
					<VisualState x:Name="Disabled">
					<Storyboard>
						<DoubleAnimation Duration="0" 
						To="0.5" 
						Storyboard.TargetProperty="Opacity" 
						Storyboard.TargetName="X"/>
					</Storyboard>
					</VisualState>
				</VisualStateGroup>
				<VisualStateGroup x:Name="FocusStates">
					<VisualState x:Name="Focused"/>
					<VisualState x:Name="Unfocused"/>
				</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Path x:Name="X_Fuzz2" 
				Data="F1 M 6.742676,3.852539 
				L 9.110840,1.559570 L 8.910645,
				0.500000 L 6.838379,0.500000 
				L 4.902832,2.435547 L 2.967285,
				0.500000 L 0.895020,0.500000 
				L 0.694824,1.559570 L 3.062988,
				3.852539 L 0.527832,6.351563 
				L 0.689941,7.600586 L 2.967285,
				7.600586 L 4.897949,5.575195 
				L 6.854004,7.600586 L 9.115723,
				7.600586 L 9.277832,6.351563 
				L 6.742676,3.852539 Z" 
				Fill="#14C51900" 
				HorizontalAlignment="Center" 
				Height="8" Margin="0,-1,0,0" 
				Opacity="1" 
				RenderTransformOrigin="0.5,0.5" 
				Stretch="Fill" 
				Stroke="#14C51900" 
				Visibility="Collapsed" 
				VerticalAlignment="Center" Width="9">
					<Path.RenderTransform>
					<TransformGroup>
					<ScaleTransform ScaleY="1.3" ScaleX="1.3"/>
					</TransformGroup>
				</Path.RenderTransform>
				</Path>
				<Path x:Name="X_Fuzz1" Data="F1 M 6.742676,
				3.852539 L 9.110840,1.559570 
				L 8.910645,0.500000 L 6.838379,
				0.500000 L 4.902832,2.435547 
				L 2.967285,0.500000 L 0.895020,
				0.500000 L 0.694824,1.559570 
				L 3.062988,3.852539 L 0.527832,
				6.351563 L 0.689941,7.600586 
				L 2.967285,7.600586 L 4.897949,
				5.575195 L 6.854004,7.600586 
				L 9.115723,7.600586 L 9.277832,
				6.351563 L 6.742676,3.852539 
				Z" Fill="#1EC51900" 
				HorizontalAlignment="Center" 
				Height="8" 
				Margin="0,-1,0,0" Opacity="1" 
				RenderTransformOrigin="0.5,
				0.5" Stretch="Fill" 
				Stroke="#1EC51900" Visibility="Collapsed" 
				VerticalAlignment="Center" 
				Width="9">
				<Path.RenderTransform>
				    <TransformGroup>
					<ScaleTransform ScaleY="1.1" ScaleX="1.1"/>
				    </TransformGroup>
				</Path.RenderTransform>
				</Path>
				<Path x:Name="X_Fuzz0" Data="F1 M 6.742676,
				3.852539 L 9.110840,1.559570 
				L 8.910645,0.500000 L 6.838379,
				0.500000 L 4.902832,2.435547 
				L 2.967285,0.500000 L 0.895020,
				0.500000 L 0.694824,1.559570 
				L 3.062988,3.852539 L 0.527832,
				6.351563 L 0.689941,7.600586 
				L 2.967285,7.600586 L 4.897949,
				5.575195 L 6.854004,7.600586 
				L 9.115723,7.600586 L 9.277832,
				6.351563 L 6.742676,3.852539 Z" 
				Fill="#FFC51900" 
				HorizontalAlignment="Center" 
				Height="8" 
				Margin="0,-1,0,0" Opacity="1" 
				Stretch="Fill" Stroke="#FFC51900" 
				Visibility="Collapsed" VerticalAlignment="
				Center" Width="9"/>
				<Path x:Name="X" Data="F1 M 6.742676,
				3.852539 L 9.110840,1.559570 
				L 8.910645,0.500000 L 6.838379,
				0.500000 L 4.902832,2.435547 
				L 2.967285,0.500000 L 0.895020,
				0.500000 L 0.694824,1.559570 
				L 3.062988,3.852539 L 0.527832,
				6.351563 L 0.689941,7.600586 
				L 2.967285,7.600586 L 4.897949,
				5.575195 L 6.854004,7.600586 
				L 9.115723,7.600586 L 9.277832,
				6.351563 L 6.742676,3.852539 
				Z" Fill="#FFFFFFFF" 
				HorizontalAlignment="Center" 
				Height="10" 
				Margin="0,-1,0,0" Opacity="0.7" 
				Stretch="Fill" 
				VerticalAlignment="Center" 
				Width="12">
					<Path.Stroke>
					<LinearGradientBrush EndPoint="0.5,1" 
					StartPoint="0.5,0">
						<GradientStop Color="#FF313131" 
						Offset="1"/>
						<GradientStop Color="#FF8E9092" 
						Offset="0"/>
					</LinearGradientBrush>
					</Path.Stroke>
				</Path>
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
	<VisualStateGroup x:Name="WindowStates">
		<VisualState x:Name="Open">
			<Storyboard>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty="Opacity" 
				Storyboard.TargetName="Overlay">
				    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				    <EasingDoubleKeyFrame KeyTime="00:00:00.3" 
				    Value="1"/>
				</DoubleAnimationUsingKeyFrames>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty=
					"(RenderTransform).(Children)
				[0].ScaleX" Storyboard.TargetName="ContentRoot">
					<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.25" 
					Value="0"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.4" 
					Value="1"/>
					<SplineDoubleKeyFrame KeySpline="0,0,0.5,1" 
					KeyTime="00:00:00.45" Value="1.05"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.55" 
					Value="1"/>
				</DoubleAnimationUsingKeyFrames>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty=
				"(RenderTransform).(Children)[0].ScaleY" 
				Storyboard.TargetName="ContentRoot">
					<SplineDoubleKeyFrame 
						KeyTime="0" Value="0"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.25" 
					Value="0"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.4" 
					Value="1"/>
					<SplineDoubleKeyFrame KeySpline="0,0,0.5,1" 
					KeyTime="00:00:00.45" Value="1.05"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.55" 
					Value="1"/>
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</VisualState>
		<VisualState x:Name="Closed">
			<Storyboard>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty="Opacity" 
				Storyboard.TargetName="Overlay">
					<EasingDoubleKeyFrame 
						KeyTime="0" Value="1"/>
					<EasingDoubleKeyFrame KeyTime="00:00:00.3" 
					Value="0"/>
				</DoubleAnimationUsingKeyFrames>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty=
				"(RenderTransform).(Children)[0].ScaleX" 
				Storyboard.TargetName="ContentRoot">
					<SplineDoubleKeyFrame KeyTime="00:00:00.2" 
					Value="1"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.25" 
					Value="1.05"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.45" 
					Value="0"/>
				</DoubleAnimationUsingKeyFrames>
				<DoubleAnimationUsingKeyFrames BeginTime="0" 
				Storyboard.TargetProperty=
					"(RenderTransform).(Children)[0].ScaleY" 
				Storyboard.TargetName="ContentRoot">
				<SplineDoubleKeyFrame KeyTime="00:00:00.2" 
				Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.25" 
				Value="1.05"/>
					<SplineDoubleKeyFrame KeyTime="00:00:00.45" 
					Value="0"/>
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</VisualState>
	</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Overlay" Background="{TemplateBinding OverlayBrush}" 
HorizontalAlignment="Stretch" Margin="0" Opacity="
{TemplateBinding OverlayOpacity}" VerticalAlignment="Top"/>
<Grid x:Name="ContentRoot" HorizontalAlignment="
{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" 
RenderTransformOrigin="0.5,0.5" VerticalAlignment="
{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
	<Grid.RenderTransform>
		<TransformGroup>
			<ScaleTransform/>
			<SkewTransform/>
			<RotateTransform/>
			<TranslateTransform/>
		</TransformGroup>
	</Grid.RenderTransform>
<Border BorderBrush="#14000000" BorderThickness="1" 
Background="#14000000" CornerRadius="2" 
HorizontalAlignment="Stretch" Margin="-1" 
VerticalAlignment="Stretch"/>
<Border BorderBrush="#0F000000" BorderThickness="1" 
Background="#0F000000" CornerRadius="2.25" 
HorizontalAlignment="Stretch" Margin="-2" 
VerticalAlignment="Stretch"/>
<Border BorderBrush="#0C000000" BorderThickness="1" 
Background="#0C000000" CornerRadius="2.5" 
HorizontalAlignment="Stretch" Margin="-3" 
VerticalAlignment="Stretch"/>
<Border BorderBrush="#0A000000" BorderThickness="1" 
Background="#0A000000" CornerRadius="2.75" 
HorizontalAlignment="Stretch" Margin="-4" 
VerticalAlignment="Stretch"/>
	<Border BorderBrush="{TemplateBinding BorderBrush}" 
	BorderThickness="{TemplateBinding BorderThickness}" 
	Background="#FFFFFFFF" CornerRadius="2">
		<Border CornerRadius="1.5" Margin="1">
			<Border.Background>
			    <LinearGradientBrush EndPoint="0.5,1" 
			    StartPoint="0.5,0">
				<GradientStop Color="#FF5F6A95" Offset="1"/>
				<GradientStop Color="#FFC1F6FD" Offset="0"/>
			    </LinearGradientBrush>
			</Border.Background>
			<Grid>
			    <Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition/>
			    </Grid.RowDefinitions>
				<Border x:Name="Chrome" BorderBrush="#FFFFFFFF" 
				BorderThickness="0,0,0,1" Width="Auto" 
				Height="25">
					<Border.Background>
					<LinearGradientBrush EndPoint="0.5,0.528" 
					StartPoint="0.5,0">
						<GradientStop Color="#FF0808A7" 
						Offset="1"/>
						<GradientStop Color="Blue" 
						Offset="0"/>
						<GradientStop Color="#FF5858E9" 
						Offset="0.478"/>
					</LinearGradientBrush>
				</Border.Background>
				<Grid Height="Auto" Width="Auto">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="30"/>
					</Grid.ColumnDefinitions>
					<ContentControl Content="" FontWeight="Bold" 
					HorizontalAlignment="Stretch" 
						IsTabStop="False" 
					Margin="6,0,6,0" VerticalAlignment="Center" 
					Foreground="#FFCACACA"/>
					<Button x:Name="CloseButton" Grid.Column="1" 
					HorizontalAlignment="Center" Height="14" 
					IsTabStop="False" Style=
						"{StaticResource ButtonStyle}" 
					VerticalAlignment="Center" Width="15" 
					Cursor="Hand"/>
				</Grid>
			</Border>
			<Border Background="{TemplateBinding Background}" 
			Margin="7" Grid.Row="1">
				<ContentPresenter x:Name="ContentPresenter" 
				ContentTemplate="{TemplateBinding ContentTemplate}" 
				Content="{TemplateBinding Content}" 
				HorizontalAlignment="{TemplateBinding 
						HorizontalContentAlignment}" 
				VerticalAlignment="{TemplateBinding 
						VerticalContentAlignment}"/>
			</Border>
		</Grid>
	</Border>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
 
<Grid x:Name="LayoutRoot" Background="White">
	<Button x:Name="btnShowMessage" Content="Show Message" 
		VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</UserControl>

完整的 C# 代码可以在这里找到

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ChildWindowCustomizationDemo
{
	public partial class MainPage : UserControl
	{
	    Style childWindowStyle;

	    public MainPage()
	    {
		// Required to initialize variables
		InitializeComponent();

		btnShowMessage.Click += (btnShowMessage_Click);
		childWindowStyle = Resources["ChildWindowStyle1"] as Style;
	    }

	    private void btnShowMessage_Click
		(object sender, System.Windows.RoutedEventArgs e)
	    {
		ChildWindow messageBox = new ChildWindow
		{
			Width = 500.0,
			Height = 200.0,
			Content = "This is a custom Child Window in Silverlight.",
			Style = childWindowStyle
										};
			messageBox.Show();
		}
	}
}

结束语

希望通过本文,您已经掌握了修改 Child Window 模板的基本概念。下次需要时,您将能够非常轻松地进行更改。如果您喜欢这篇文章,请在文章末尾提交反馈,让我知道您是否有任何问题和/或建议。另外,请不要忘记为这篇文章投票。

我还会在 @kunal2383 上发推特。在那里关注我,并将本文链接分享给您的朋友和同事。另外,不要忘记关注我的新网站 Silverlight-Zone。您可以在那里找到 Silverlight 和 Windows Phone 7 相关的文章新闻。我们也在 Twitter、Facebook 和其他服务上发布所有这些文章。如果您想包含您的文章,只需在顶部菜单栏上的讨论论坛部分给我留言。祝您愉快!

使用 Blend 自定义 Silverlight ChildWindow 样式 - CodeProject - 代码之家
© . All rights reserved.