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>

当然，上面的代码不起作用，因为它必须位于页面的根标签中，但我确实希望如此。

有谁知道我可以创造这种效果的方式？它不一定是一个完美的解决方案，只需复制它就可以解决任何问题。

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

下图是我目前的情况：

current layout

我希望“镜面光”控件在应用栏顶部“休息”，如下所示：

correct layout

最后但并非最不重要的是，这是相关的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

您无法修改AppBar Layout位置，也无法将其放置在另一个元素中。它总是需要在页面级别声明，因为ApplicationBar是页面本身的属性，而不是UIElement，FrameworkElement或Control属性。

我不明白你的意思是“在我的布局网格上停留”如果你想在你的ApplicationBar下面（按Z顺序）你的布局网格，你可以添加一个低于1的值的Opacity属性对于ApplicationBar，这种方式页面内容使用整页，ApplicationBar位于内容之上。这是你想要的效果吗？如果没有，请帮助我了解你想要达到的目标（也许用Paint绘制的一些小图片有助于理解你想要的视觉效果）

Answer 2

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

第一个是应用程序栏不透明：

<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"的高度，因此只有两个滑块适合并从应用栏中完全删除了不透明度：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"将解决“顶部”问题。

如何在应用程序栏上设置元素（或让布局了解它）？

2 个答案: