WP8 如何让 listPicker “推开”其他 UI 元素？答案

【问题标题】：WP8 How to make listPicker "push away" other UI elements?WP8 如何让 listPicker “推开”其他 UI 元素？
【发布时间】：2014-06-17 02:19:06
【问题描述】：

我一直在努力让 listPicker “推开”其他 UI 元素，以便透明背景不会影响里面的内容难以辨认。我以为把它放在一个简单的堆栈面板中，甚至是一个网格都可以实现这一点，但我似乎无法弄清楚。这是我想将其应用于的主要 XAML：

<phone:PivotItem Header="Brew">
            <phone:PivotItem.Foreground>
                <ImageBrush Stretch="Fill"/>
            </phone:PivotItem.Foreground>
            <ScrollViewer x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
                <Grid Height="693">
                    <Rectangle x:Name="derivedQuantityRect" Fill="#FF5C97BF" HorizontalAlignment="Left" Height="52" Margin="2,233,0,0" Stroke="#FF162E3E" VerticalAlignment="Top" Width="160" StrokeThickness="3"/>
                    <TextBox x:Name="quantityInput" HorizontalAlignment="Left" Height="81" Margin="-11,124,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="189" Background="#FF5C97BF" BorderBrush="#FF162E3E" Foreground="Black" LostFocus="quantityInputLostFocus" InputScope="Number" GotFocus="quantityInputGotFocus" FontSize="32"/>
                    <TextBlock x:Name="quantityInputPrompt" HorizontalAlignment="Left" Margin="1,105,0,0" TextWrapping="Wrap" Text="Amount of Water:" VerticalAlignment="Top" Foreground="#FFDC9A57"/>
                    <TextBlock x:Name="unitPrompt" HorizontalAlignment="Left" Margin="182,106,0,0" TextWrapping="Wrap" Text="Unit:" VerticalAlignment="Top" Foreground="#FFDC9A57"/>
                    <TextBlock x:Name="quantityTypePrompt" HorizontalAlignment="Left" Margin="180,2,0,0" TextWrapping="Wrap" Text="Type:" VerticalAlignment="Top" Foreground="#FFDC9A57"/>
                    <TextBlock x:Name="info" HorizontalAlignment="Left" Margin="4,310,0,0" TextWrapping="Wrap" Text="1.28% TDS, 19.2% Extraction Yield" VerticalAlignment="Top" Foreground="#FFC78C4F" FontSize="18.667" Tap="infoTap"/>
                    <TextBlock x:Name="quantityOutputPrompt" HorizontalAlignment="Left" Margin="4,206,0,0" TextWrapping="Wrap" Text="Derived Quantity: " VerticalAlignment="Top" Foreground="#FFDC9A57"/>
                    <TextBlock x:Name="quantityOutput" HorizontalAlignment="Left" Margin="9,236,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Foreground="White" FontSize="32"/>
                    <TextBlock x:Name="derivedUnitPrompt" HorizontalAlignment="Left" Margin="183,205,0,0" TextWrapping="Wrap" Text="Unit:" VerticalAlignment="Top" Foreground="#FFDC9A57"/>
                    <TextBlock x:Name="test" HorizontalAlignment="Left" Margin="246,-110,0,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
                    <TextBlock x:Name="brewMethodPrompt" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Brew Method:" VerticalAlignment="Top" Foreground="#FFC78C4F" FontSize="20" Tap="brewMethodPromptTap"/>
                    <toolkit:ListPicker x:Name="brewMethodList" HorizontalAlignment="Left" Margin="-2,24,0,0" VerticalAlignment="Top" Height="127" Width="164" BorderBrush="#FF162E3E" Foreground="Black" SelectionChanged="brewMethodSelectionChange" LostFocus="quantityInputLostFocus" Background="#FF5C97BF" />
                    <Button x:Name="resetButton" Content="Reset Values" HorizontalAlignment="Left" Margin="-11,343,0,0" VerticalAlignment="Top" BorderBrush="#FF3B779F" Foreground="#FFC78C4F" Click="resetButtonClick"/>
                    <UI:AdControl HorizontalAlignment="Left" Height="80" Margin="-23,480,-25,0" VerticalAlignment="Top" Width="480" ApplicationId="d34f521d-289f-4d8f-9e98-89cc1df4c40c" AdUnitId="10140379"/>
                    <toolkit:ListPicker x:Name="derivedUnitList" HorizontalAlignment="Left" Margin="179,225,0,0" VerticalAlignment="Top" Height="327" Width="64" Background="#FF5C97BF" BorderBrush="#FF162E3E" Foreground="Black" SelectionChanged="unitListSelectionChange" MouseEnter="unitListMouseEnter"/>
                    <toolkit:ListPicker x:Name="unitList" HorizontalAlignment="Left" Margin="180,128,0,0" VerticalAlignment="Top" Height="327" Width="64" Background="#FF5C97BF" BorderBrush="#FF162E3E" Foreground="Black" SelectionChanged="unitListSelectionChange" MouseEnter="unitListMouseEnter" d:IsLocked="True"/>
                    <toolkit:ListPicker x:Name="quantityTypeList" HorizontalAlignment="Left" Margin="176,24,0,0" VerticalAlignment="Top" Height="127" Width="202" Background="#FF5C97BF" BorderBrush="#FF162E3E" Foreground="Black" SelectionChanged="quantityTypeListSelectionChanged" LostFocus="quantityInputLostFocus"/>
                </Grid>
            </ScrollViewer>
        </phone:PivotItem>

说实话，我想做的只是让它在手机处于 Light Theme 时仍然易于阅读。出于某种原因，当手机是深色主题时，列表选择器的背景是纯白色的，但在浅色主题中它是透明的，我找不到改变它的属性。我很开放并感谢任何建议。此外，我对 xaml/windows 手机还是很陌生。

【问题讨论】：

标签： user-interface windows-phone-8 stackpanel listpicker

【解决方案1】：

以下博客文章涵盖了您的透明度+主题问题。 http://www.dotnetgeekette.com/2013/05/making-listpicker-display-correctly-in.html

【讨论】：

包含您认为外部参考信息正确的原因通常是个好主意。也将本质内容放入答案中；不要仅仅链接到它。