1

澄清一下，我想让我的 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>

感谢您的阅读和帮助。

4

2 回答 2

1

您不能修改 AppBar 布局位置，也不能将其定位在另一个元素内。它始终需要在页面级别声明，因为 ApplicationBar 是页面本身的属性，而不是 UIElement、FrameworkElement 或 Control 属性。

我不明白你的意思是“在我的布局网格之上休息”如果你希望你的布局网格在你的 ApplicationBar 下方（按 Z 顺序），你可以将值小于 1 的 Opacity 属性添加到 ApplicationBar ，这样页面内容使用整个页面并且ApplicationBar定位在内容的顶部。这是你想要的效果吗？如果没有，请帮我理解你想要达到的效果（也许用Paint绘制的小图可以帮助理解你想要的视觉效果）

于 2013-08-31T17:47:09.613 回答
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"因此只有两个滑块适合并完全删除了应用栏的不透明度：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"将解决“顶部”问题。

于 2013-09-04T05:35:39.003 回答