Tuesday, 20 August 2013

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

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

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.
Thanks, Cole

No comments:

Post a Comment