windows - 如何在 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>

当然，上面的代码是行不通的，因为 必须在页面的根标记中，但我希望它能行。

有谁知道我可以创建这种效果的方法吗？它不一定是完美的解决方案，只需复制它并适用于任何分辨率即可。

根据要求，我将详细说明具体问题。

下图是我目前的情况:

我希望“镜面光”控件“停留”在应用栏的顶部，如下所示:

最后但同样重要的是，这里是相关的 XAML:

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

感谢您的阅读和帮助。

Answer 1

所以这里有两个解决方案:

第一个是应用栏不透明:

<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 的高度:Height="150" 所以只有两个 slider 会适合并完全移除应用栏的不透明度:不透明度="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" 将解决“在顶部”的问题。