SL3透明/玻璃儿童窗?

时间:2010-01-22 22:05:53

标签: c# silverlight

有关将Silverlight 3.0中的ChildWindow设计为与Windows 7 Aero玻璃窗口相似的任何示例吗?

我尝试更改背景等,overlaybrush和overlayopacity属性,包括启用RootVisual,因为只要显示子窗口就会禁用它,但到目前为止还没有运气。

非常感谢任何示例或建议。

感谢。

3 个答案:

答案 0 :(得分:1)

我没有适合您的Windows 7 Aero Glass样式,但您必须更换ChildWindow的默认控件模板并使用样式来获取外观而不仅仅是更改属性(Background,OverlayBrush,OverlayOpacity )在控制上。

MSDN reference page for ChildWindow Styles and Templates遍历ChildWindow的部件和状态模型,并包含默认ControlTemplate的XAML。我猜这将是你开始的最好的地方,然后你将不得不在Blend中调整模板的修改版本以获得你想要的样子。

我认为只要您仍然需要ChildWindow的标准模态类型行为,就不需要重新启用应用程序的RootVisual。

答案 1 :(得分:1)

更新:我也撰写了一篇关于此事的博客文章http://josheinstein.com/blog/index.php/2010/07/windows-7-style-aero-childwindow-template/

我删除了之前的答案,因为我决定再次尝试使用Windows 7风格的Aero ChildWindow。我仍然无法使模糊效果正常工作,因为模糊只会模糊它应用的元素的内容。如果该元素具有透明度,则通过它显示的任何内容都不会模糊。我想这可以通过使用可写位图或像素着色器的一些技巧来完成,但我现在还不是真的那么做。

然而,在Blend中使用了令人敬畏的“渐变吸管”工具我设法让我的标题栏和关闭按钮看起来非常类似于Windows 7标题。屏幕截图(漂亮)和XAML(不那么漂亮)在下面。

ChildWindow http://josheinstein.com/blog/wp-content/uploads/2010/07/ChildWindowWindows7Aero.png

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                    xmlns:s="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

  <Style x:Key="AeroWindowCloseButton" TargetType="Button">
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="#FFEEB3AC" Offset="0.009"/>
          <GradientStop Color="#FFDA8578" Offset="0.402"/>
          <GradientStop Color="#FFC64D38" Offset="0.459"/>
          <GradientStop Color="#FFC84934" Offset="0.598"/>
          <GradientStop Color="#FFD48671" Offset="0.885"/>
          <GradientStop Color="#FFE8BBAE" Offset="0.943"/>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="#FF5E5E5E"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="Width" Value="45"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Border
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="0,0,3,3">
            <Path
              Fill="{TemplateBinding Foreground}"
              Width="11"
              Height="10"
              Stretch="Fill"
              Data="F1 M 6.742,3.852 L 9.110,1.559 L 8.910,0.500 L 6.838,0.500 L 4.902,2.435 L 2.967,0.500 L 0.895,0.500 L 0.694,1.559 L 3.062,3.852 L 0.527,6.351 L 0.689,7.600 L 2.967,7.600 L 4.897,5.575 L 6.854,7.600 L 9.115,7.600 L 9.277,6.351 L 6.742,3.852 Z">
              <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>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="AeroWindow" TargetType="s:ChildWindow">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="#FF5E5E5E"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="OverlayBrush" Value="Transparent"/>
    <Setter Property="OverlayOpacity" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="TabNavigation" Value="Cycle"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="s:ChildWindow">
          <Grid x:Name="Root">

            <!-- OVERLAY BEHIND CHILDWINDOW -->
            <Grid
              x:Name="Overlay"
              Background="{TemplateBinding OverlayBrush}"
              Opacity="{TemplateBinding OverlayOpacity}"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Top"/>

            <!-- WINDOW CONTAINER -->
            <Grid x:Name="ContentRoot" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">

              <!-- GLASS BACKGROUND AND BORDER -->
              <!--
          NOTE: This border should not physically contain the rest of the
          window contents because it has an opacity setting that would
          affect all of its children. Instead, a second border is directly
          above it in the z-order and contains the child elements.
          -->
              <Border
                x:Name="Chrome"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="4"
                Opacity="0.9">
                <Border.Background>
                  <LinearGradientBrush MappingMode="Absolute" StartPoint="0,0" EndPoint="1920,0">
                    <GradientStop Color="#FFADC9E5" Offset="0.010"/>
                    <GradientStop Color="#FFA7C2DC" Offset="0.069"/>
                    <GradientStop Color="#FFB7D2EC" Offset="0.084"/>
                    <GradientStop Color="#FFB7D2EC" Offset="0.146"/>
                    <GradientStop Color="#FFA8C4DE" Offset="0.168"/>
                    <GradientStop Color="#FFB8D3ED" Offset="0.455"/>
                    <GradientStop Color="#FFA6C1DB" Offset="0.518"/>
                    <GradientStop Color="#FFB6D1EB" Offset="0.543"/>
                    <GradientStop Color="#FFA7C2DC" Offset="0.604"/>
                    <GradientStop Color="#FFB7D2EC" Offset="0.618"/>
                    <GradientStop Color="#FFB7D2EC" Offset="0.700"/>
                    <GradientStop Color="#FFABC6E1" Offset="0.722"/>
                    <GradientStop Color="#FFB1CEEA" Offset="0.778"/>
                  </LinearGradientBrush>
                </Border.Background>
              </Border>

              <!-- WINDOW CONTENTS -->
              <!-- 
          NOTE: This element will not have a visible border. The Chrome element
          provides the visible border but this element needs to have a matching
          thickness and corner radius so that the contents of the window are
          "pushed in" by the same amount.
          -->
              <Border BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                <Grid>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="25"/>
                    <RowDefinition/>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                  </Grid.ColumnDefinitions>
                  <ContentControl
                    Content="{TemplateBinding Title}"
                    Foreground="#FF393939"
                    FontWeight="Bold"
                    VerticalAlignment="Center"
                    Margin="6,0,6,0"
                    Grid.Row="0"
                    Grid.Column="0"/>
                  <Button
                    x:Name="CloseButton"
                    Style="{StaticResource AeroWindowCloseButton}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="1,0,1,1"
                    VerticalAlignment="Top"
                    Margin="0,0,5,0"
                    Grid.Row="0"
                    Grid.Column="1"/>
                  <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Margin="{TemplateBinding Padding}"
                    Grid.Row="1"
                    Grid.ColumnSpan="2">
                    <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>
</ResourceDictionary>

答案 2 :(得分:0)

创建ChildWindow时,您可以this article使用Glass Theme in Silverlight与{{1}}进行模板制作,以创建您想要的内容!