2010-01-22 2 views
2

Silverlight 3.0에서 ChildWindow를 Windows 7 Aero 글래스 창처럼 보이게 스타일 지정하는 모든 예제는 무엇입니까?SL3 투명/유리 하위 창?

나는 RootVisual을 활성화하는 것을 포함하여 배경 등, overlaybrush 및 overlayopacity 속성을 변경하려고 시도했습니다. 하위 창이 표시 될 때마다 사용 중지되었지만 지금까지는 운이 없었기 때문입니다.

모든 예제 또는 제안 사항을 크게 높이세요.

감사합니다.

+0

아마도 당신은 당신이 지금까지 가지고있는 스타일의 템플릿의 XAML을 공유해야합니까? BTW "RootVisual 사용"이란 무엇을 의미합니까? – AnthonyWJones

답변

1

Windows 7 Aero Glass 스타일이 없지만 ChildWindow의 기본 컨트롤 템플릿을 바꾸고 속성을 변경하는 대신 스타일을 변경하는 스타일을 지정해야합니다 (배경, OverlayBrush, OverlayOpacity)를 클릭합니다.

MSDN reference page for ChildWindow Styles and Templates은 ChildWindow의 부품 및 상태 모델을 거치며 기본 ControlTemplate의 XAML을 포함합니다. 나는 이것이 당신이 시작할 수있는 가장 좋은 장소가 될 것이라고 생각합니다. 그러면 Blend에서 수정 된 버전의 템플릿을 수정하여 원하는 모양을 찾아야 할 것입니다.

ChildWindow의 표준 모달 유형 동작이 여전히 필요하다면 응용 프로그램의 RootVisual을 다시 활성화해야한다고 생각하지 않습니다.

+0

불투명도 및 기타 설정을 수정하는 대신 Silverlight 3에있는 많은 효과가있는 배경을 추가하여 시뮬레이션 할 수 있습니다. Blend를 사용하여 값을 실험 해 볼 수 있습니다. - DropShadowEffect - BlurEffect –

0

ChildWindowthis article을 사용하면 Glass Theme in Silverlight을 만들 때 this article을 사용하여 원하는 것을 만들 수 있습니다.

+0

대부분의 경험 많은 디자이너는 템플릿을 통해 ChildWindow를 사용자 지정할 수 있어야하지만 ChildWindow는 단순히 설계되지 않았기 때문에 진정한 Windows Aero 테마를 쉽게 얻을 수 없습니다. 또한, 그들은 표준 준수에 크게 부족합니다. 글래시 스타일 외에도 UX의 중요성을 자세히 설명하는 블로그를 게시했습니다. http://intersoftpt.wordpress.com/2010/05/21/clientui-part-4-rich-ui-meets-iso-standards/를 확인하십시오. –

1

업데이트 : 나는 윈도우 7 스타일의 에어로 ChildWindow에서 또 다른 자상하기로 결정 때문에 너무

http://josheinstein.com/blog/index.php/2010/07/windows-7-style-aero-childwindow-template/ 나는 내 이전 대답을 삭제 이것에 대해 블로그에 글을 남긴 바있다. 흐림 효과는 적용된 요소의 내용 만 흐리게하기 때문에 여전히 제대로 작동하는 흐림 효과를 얻지 못하고 있습니다. 해당 요소에 투명도가 있으면 그 요소를 통해 보여지는 모든 것이 흐려지지 않습니다. 필자는 쓰기 가능한 비트 맵이나 픽셀 쉐이더를 사용하여 약간의 속임수로 끝낼 수 있다고 생각하지만, 지금은 그다지 중요하지 않습니다.

그러나 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> 
관련 문제