AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Silverlight自定义ChildWindow样式

分类：Silverlight作者：编程之家

Silverlight默认提供的弹出框窗体，样式单调，内容区域中有个大边框。经过自定义样式，对比效果图如下：

 修改前：

   修改后：         


具体实现XAML样式代码如下：

<!-- 弹出窗口的样式，去除原有的白色外边框 -->
    <Style targettype="controls:ChildWindow" x:Name="SubWindow">
        <Setter Property="Padding" Value="5"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="FontFamily" Value="Microsoft YaHei"></Setter>
        <Setter Property="BorderBrush" Value="{StaticResource ChildWndBoderColor}"></Setter>
        <Setter Property="BorderThickness" Value="5"></Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#EEF5FB" Offset="0" />
                    <GradientStop Color="#EEF5FB" Offset="1" />
                    <GradientStop Color="#FFDEEAFB" Offset="0.965" />
                    <GradientStop Color="#FFDEEAFB" Offset="0.010" />
                    <GradientStop Color="#FFCBE3F7" Offset="0.999" />
                    <GradientStop Color="#FFCBE3F7" Offset="0.001" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate targettype="controls:ChildWindow">
                    <Grid x:Name="Root">
                        <visualstatemanager.VisualStateGroups>
                            <VisualStateGroup x:Name="WindowStates">
                                <VisualState x:Name="Open">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" 
                                                                       Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
                                            <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.5,1" KeyTime="00:00:00.45" Value="1.05" />
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" 
                                                                       Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0" />
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1" />
                                            <SplineDoubleKeyFrame KeySpline="0,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.TargetName="ContentRoot" 
                                                                       Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
                                            <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.TargetName="ContentRoot" 
                                                                       Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
                                            <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" HorizontalAlignment="Stretch" 
                                  VerticalAlignment="Stretch"
                                  Background="{TemplateBinding OverlayBrush}" />

                        <!-- 内容区域 包括标题 -->
                        <Grid x:Name="ContentRoot" Margin="10"
                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                  RenderTransformOrigin="0.5,0.5" 
                                  Height="{TemplateBinding Height}" 
                                  Width="{TemplateBinding Width}">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform />
                                    <SkewTransform />
                                    <RotateTransform />
                                    <TranslateTransform />
                                </TransformGroup>
                            </Grid.RenderTransform>

                            <Border CornerRadius="10 10 2 2" 
                                        Margin="1" BorderBrush="#DEE9F2"
                                        BorderThickness="2">

                                <!-- 底层背景色 -->
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
                                        <GradientStop Color="#FFE5E8EB" Offset="1" />
                                        <GradientStop Color="#FFFEFEFE" Offset="0" />
                                    </LinearGradientBrush>
                                </Border.Background>

                                <Grid>
                                    <Grid.RowDeFinitions>
                                        <RowDeFinition Height="Auto" />
                                        <RowDeFinition Height="*" />
                                    </Grid.RowDeFinitions>

                                    <!-- 标题区域 -->
                                    <Border x:Name="TitleArea" CornerRadius="10 10 0 0">

                                        <!-- 标题区 设置是否显示标题 -->
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,0">
                                                <GradientStop Color="#295AA6" Offset="1" />
                                                <GradientStop Color="#9CAAC1" Offset="0" />
                                            </LinearGradientBrush>
                                        </Border.Background>

                                        <!-- 标题区域背景颜色 -->
                                        <Grid Height="Auto" Width="Auto">
                                            <Grid.ColumnDeFinitions>
                                                <ColumnDeFinition Width="*" />
                                                <ColumnDeFinition Width="Auto" />
                                            </Grid.ColumnDeFinitions>
                                            <ContentControl Content="{TemplateBinding Title}" 
                                                            IsTabStop="False" Foreground="White"
                                                            FontWeight="Bold" FontSize="14"
                                                            HorizontalAlignment="Stretch" 
                                                            VerticalAlignment="Center"  
                                                            Margin="5" />

                                            <Button x:Name="CloseButton" Style="{StaticResource ButtonStyle}"
                                                        Grid.Column="1" Cursor="Hand"
                                                        HorizontalAlignment="Center" Margin="5 0"
                                                        VerticalAlignment="Center"
                                                        Width="20" Height="20">
                                            </Button>
                                        </Grid>
                                    </Border>

                                    <!-- 内容区域 -->
                                    <Border Background="{TemplateBinding Background}" CornerRadius="0 0 2 2"
                                            Grid.Row="1">
                                        <ContentPresenter x:Name="ContentPresenter" 
                                                          Content="{TemplateBinding Content}" 
                                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    </Border>
                                </Grid>


                            </Border>
                        </Grid>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


其中右上角的关闭按钮，需要重新实现，样式代码如下： 

<!-- 显示的关闭按钮的样式 -->
    <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,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 HorizontalAlignment="Center" VerticalAlignment="Center" 
                          Width="12" Height="14" Background="#02FFFFFF" x:Name="grid">
                        <visualstatemanager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="normal" />
                                <VisualState x:Name="MouSEOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" 
                                                                       Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" 
                                                                       Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" 
                                                                       Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="X" 
                                                         Storyboard.TargetProperty="Opacity" To="0.95" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.85" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" 
                                                                       Storyboard.TargetProperty="Visibility">
                                            <discreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.5"
                                                         Storyboard.TargetName="X" 
                                                         Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </visualstatemanager.VisualStateGroups>
                        <Path HorizontalAlignment="Center" Margin="0,-1,0" Width="12" Fill="#14C51900" Stretch="Fill" 
                              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" x:Name="X_Fuzz2" stroke="#14C51900" Height="12" 
                               VerticalAlignment="Center" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1.3" ScaleY="1.3" />
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Path HorizontalAlignment="Center" Margin="0,1,0" Width="12" Fill="#1EC51900" Stretch="Fill" 
                              Data="F1 M 6.742676,0.500000 L 
                                    6.838379,0.500000 L 4.902832,0.500000 L 
                                    0.694824,1.559570 L 3.062988,7.600586 L 
                                    2.967285,7.600586 L 4.897949,7.600586 L 
                                    9.277832,6.351563 L 6.742676,3.852539 Z" x:Name="X_Fuzz1" stroke="#1EC51900" 
                                Height="12" VerticalAlignment="Center" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Path HorizontalAlignment="Center" Margin="0,0" Width="12" Fill="#FFC51900" Stretch="Fill" 
                              Data="F1 M 6.742676,3.852539 Z" x:Name="X_Fuzz0" stroke="#FFC51900" Height="12" 
                              VerticalAlignment="Center" Opacity="1" Visibility="Collapsed" />
                        <Path HorizontalAlignment="Center" Margin="0,0" Width="12" Fill="#FFFFFFFF" Stretch="Fill" 
                              Data="F1 M 6.742676,6.351563 L 
                                    0.689941,3.852539 Z" 
                              x:Name="X" Height="12" VerticalAlignment="Center" Opacity="0.7">
                            <Path.stroke>
                                <LinearGradientBrush EndPoint="0.5,0">
                                    <GradientStop Color="#FF313131" Offset="1" />
                                    <GradientStop Color="#FF8E9092" Offset="0" />
                                </LinearGradientBrush>
                            </Path.stroke>
                        </Path>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native