Native ComboBox not displaying choices correctly
- by anothershrubery
EDIT: It seems that ListPicker is the way to go but I have had further problems with that detailed Microsoft.Phone.Controls.Toolkit ListPicker throws XamlParseException
I have the following ComboBox in code:
<ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White">
<ComboBoxItem Content="Win" />
<ComboBoxItem Content="Place" />
<ComboBoxItem Content="Lose" />
</ComboBox>
But it does not display as I would have expected. When you drop down the ComboBox the options don't appear, it's just like empty items. See below:
However, when an item is selected, it displays correctly and the correct index/item is returned. See below:
I'm sure there is something simple I have missed but can't put my finger on it.
EDIT: Ok I am posting the full code for this. I have a user control, OddsRow, that looks like this:
<UserControl xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" x:Class="MojoPinBetOddsCalculator.OddsRow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="30*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="70*" ></ColumnDefinition>
<ColumnDefinition Width="100*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="RowNumber" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
<TextBox x:Name="OddsNumerator" Grid.Column="1" Width="90" Height="70" HorizontalAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" MaxLength="3" InputScope="TelephoneNumber"></TextBox>
<TextBlock x:Name="Slash" Grid.Column="2" Text="/" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="OddsDenominator" Grid.Column="3" Width="90" Height="70" VerticalAlignment="Center" TextAlignment="Center" MaxLength="3" HorizontalAlignment="Center" InputScope="TelephoneNumber"></TextBox>
<CheckBox x:Name="EachWay" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" />
<CheckBox x:Name="Place" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0" Width="71" Margin="10,0,0,0" Padding="0" />
<ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White">
<ComboBoxItem Content="Win" />
<ComboBoxItem Content="Place" />
<ComboBoxItem Content="Lose" />
</ComboBox>
</Grid>
</UserControl>
And it is displayed in the MainPage like so:
<phone:PhoneApplicationPage xmlns:my="clr-namespace:MojoPinBetOddsCalculator"
x:Class="MojoPinBetOddsCalculator.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="BET ODDS CALCULATOR" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="calculate" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch">
<Grid x:Name="Scrollable">
<ScrollViewer>
<Grid x:Name="BettingGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="BetList">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="30*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
<ColumnDefinition Width="100*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="EW" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" />
<TextBlock Text="Place" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" />
<TextBlock Text="Result" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" />
<my:OddsRow Grid.Row="1" Grid.ColumnSpan="7" Row="1"/>
<my:OddsRow Grid.Row="2" Grid.ColumnSpan="7" Row="2"/>
<my:OddsRow Grid.Row="3" Grid.ColumnSpan="7" Row="3"/>
<my:OddsRow Grid.Row="4" Grid.ColumnSpan="7" Row="4"/>
<my:OddsRow Grid.Row="5" Grid.ColumnSpan="7" Row="5"/>
<my:OddsRow Grid.Row="6" Grid.ColumnSpan="7" Row="6"/>
</Grid>
<Grid x:Name="ControlsGrid" Grid.Row="1">
<Button x:Name="AddRowButton" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="Black" Content="Add Row" FontSize="16" Click="AddRowButton_Click" Height="70" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Separately the ComboBox works, and also the code for the OddsRow works as expected... separately. When combined it doesn't display the items.
OddsRow.xaml.cs
public partial class OddsRow : UserControl
{
private int m_Row;
public OddsRow()
{
InitializeComponent();
}
public int Row
{
get
{
return m_Row;
}
set
{
m_Row = value;
RowNumber.Text = m_Row + " - ";
}
}
}
