WP8 How to make listPicker "push away" other UI elements?

Question

I have been struggling to make the listPicker "push away" the other UI elements so that the transparent background does not effect illegibility of what is inside. I thought putting it inside of a simple stackpanel, or even a grid would achieve this, but I just can't seem to figure it out. Here's the main XAML that I would like to apply this to:

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

To be honest, all I want to do it make it so when the phone is in Light Theme, it's still easy to read. For some reason when the phone is dark themed, the list picker's background is solid white, yet in Light theme it's transparent and I can't find an attribute to alter this. I'm open and appreciate any suggestions. Also I'm still quite new to xaml/windows phone.

score 0 · Answer 1 · answered Oct 22 '13 at 00:59

0

The following blog post covers your issue with transparency+theme issues. http://www.dotnetgeekette.com/2013/05/making-listpicker-display-correctly-in.html

answered Oct 22 '13 at 00:59

Koffy

768
8
19

1

It's usually a good idea to include why you think the information in an external reference is correct. Also put the essential content into the answer; don't merely link to it. – dcaswell Oct 22 '13 at 01:18

WP8 How to make listPicker "push away" other UI elements?

1 Answers1