SL3 Прозрачное / Стекло Детское Окно?

Question

Есть ли примеры, как оформить ChildWindow в Silverlight 3.0, чтобы он выглядел как стеклянные окна Windows 7 Aero?

Я пытался изменить свойства фона и т. Д., Оверлейной кисти и оверлейной емкости, в том числе включить RootVisual, поскольку он отключается всякий раз, когда отображается дочернее окно, но пока не повезло.

Любые примеры или предложения будут с благодарностью.

Спасибо.

Answer 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>

Answer 2

У меня нет стиля Windows 7 Aero Glass для вас, но вам придется заменить шаблон элемента управления по умолчанию для ChildWindow и стиль, чтобы он выглядел вместо простого изменения свойств (Background, OverlayBrush, OverlayOpacity ) на контроле.

Справочная страница MSDN для стилей и шаблонов ChildWindow охватывает модель деталей и состояний для ChildWindow и включает XAML для шаблона ControlTemplate по умолчанию. Я полагаю, что это будет лучшее место для вас, и вам придется настроить модифицированную версию шаблона в Blend, чтобы выглядело так, как вы хотите.

Я не верю, что есть необходимость повторно включать RootVisual приложения, если вы все еще хотите стандартное модальное поведение ChildWindow.

Answer 3

Вы можете использовать this article при шаблонировании ChildWindow с this article при создании Glass Theme in Silverlight, чтобы создать то, что вы хотите!