어떻게 Applicationbar 상단에 요소를 설정할 수 있습니까 (또는 레이아웃을 알고 있어야합니까?).

Question

명확히하기 위해 ApplicationBar를 LayoutRoot 그리드 위에 놓고 싶습니다. 원하는 효과는 다음과 같다 : 물론

<StackPanel> 
    <Grid x:Name="LayoutRoot" Background="Transparent"> 
    </Grid> 
    <phone:PhoneApplicationPage.ApplicationBar> 
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
     </shell:ApplicationBar> 
    </phone:PhoneApplicationPage.ApplicationBar> 
</StackPanel> 

는 페이지의 루트 태그에 있어야하기 때문에 위의 코드가 작동하지 않습니다,하지만 난 그게 한 소원 않습니다.

누구든지이 효과를 만들 수있는 방법을 알고 있습니까? 완벽한 솔루션 일 필요는 없으며 모든 솔루션을 복제 할 수 있습니다.

요청을 통해 구체적인 문제에 대해 자세히 설명합니다.

내가 응용 프로그램 바의 상단에 '휴식'에 '하나 뿐인 빛'제어하려면,과 같이 :

아래 그림은 내가 현재 가지고있는 것입니다

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" /> 
    <ScrollViewer Name="LightControl" Height="200" VerticalAlignment="Bottom" Visibility="Collapsed"> 
     <Grid Margin="12,0,12,0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" /> 
     </Grid> 
    </ScrollViewer> 
</Grid> 

<phone:PhoneApplicationPage.ApplicationBar> 
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" /> 
    </shell:ApplicationBar> 
</phone:PhoneApplicationPage.ApplicationBar> 

:하지 적어도 확실히

그리고 마지막으로하지만, 여기에 관련 XAML입니다

읽고 도와 주셔서 감사합니다.

Answer 1

(아마도 페인트로 그려진 작은 이미지가 원하는 시각 효과를 이해하는 데 도움이 될 수 있습니다) 달성하고자하는 것을 이해 도와주세요 응용 프로그램 막대 투명없는 : Height="150" 그래서 두 슬라이더가 맞는 완전히 응용 프로그램 표시 줄에서 불투명도를 제거 :

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" /> 
    <ScrollViewer Name="LightControl" Height="150" VerticalAlignment="Bottom" Visibility="Collapsed"> 
     <Grid Margin="12,0,12,0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" /> 
     </Grid> 
    </ScrollViewer> 
</Grid> 

<phone:PhoneApplicationPage.ApplicationBar> 
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" /> 
    </shell:ApplicationBar> 
</phone:PhoneApplicationPage.ApplicationBar> 

나는 실제로 ScrollViewer의 높이를 변경 Opacity="0". 투명 응용 프로그램 바 이제

은 : 페이지의 끝은 실제로 어디

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <DrawingSurface x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded" /> 
    <ScrollViewer Name="LightControl" Height="150" Margin="0,0,0,70" VerticalAlignment="Bottom" Visibility="Collapsed"> 
     <Grid Margin="12,0,12,0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Text="Ambient Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="0" Name="AmbientLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="AmbientLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Text="Diffuse Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="1" Name="DiffuseLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="DiffuseLightSlider_OnValueChanged" /> 
      <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" Text="Specular Light" Style="{StaticResource PhoneTextLargeStyle}" /> 
      <Slider Grid.Column="1" Grid.Row="2" Name="SpecularLightSlider" Minimum="0.0" Maximum="2.0" 
       Value="1.0" ValueChanged="SpecularLightSlider_OnValueChanged" /> 
     </Grid> 
    </ScrollViewer> 
</Grid> 

<phone:PhoneApplicationPage.ApplicationBar> 
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0"> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Center" Click="Center_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Wireframe.png" Text="Wireframe" Click="Rasterizer_Click" /> 
     <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Center.png" Text="Light" Click="Light_Click" /> 
    </shell:ApplicationBar> 
</phone:PhoneApplicationPage.ApplicationBar> 

당신은 UI 요소 (들)을 투명하게하기 위해 응용 프로그램 막대를 요구하기 때문에, 당신의 케이스 ScrollViewer에, 알고 응용 막대가 끝납니다. 그래서 하단에서 70 마진을 추가하여 : Margin="0,0,0,70" "위에"문제를 해결할 것입니다.

Answer 2

AppBar 레이아웃 위치를 수정하거나 다른 요소 안에 배치 할 수 없습니다. ApplicationBar는 UIElement, FrameworkElement 또는 Control 속성이 아닌 페이지 자체의 속성이므로 항상 페이지 수준에서 선언해야합니다.

"레이아웃 격자 위에 놓으십시오"라는 뜻을 정확히 이해하지 못합니다. 레이아웃 격자를 ApplicationBar 아래에 (Z 순서대로) 배치하려는 경우 다음과 같은 값으로 불투명도 속성을 추가 할 수 있습니다. 1을 ApplicationBar에 추가하면 페이지 내용이 전체 페이지를 사용하고 ApplicationBar가 내용 위에 배치됩니다. 이것이 당신이 원하는 효과입니까?

첫 번째가로되어 있지 않으면, 내가 당신이 그래서 여기에 두 가지 솔루션은