WPF ComboBox initially displays first item at wrong size

I have a ComboBox on a WPF window that is giving me some heartache, in that when first displayed, the first selection is rendered improperly. The ComboBox does not display text only; it displays an object of 开发者_Python百科a type that descends from UserControl. Here's the XAML for the ComboBox itself:

<ComboBox Grid.Column="0" 
          Height="69" 
          HorizontalAlignment="Stretch"
          HorizontalContentAlignment="Center"
          ItemsSource="{Binding Path=ViewChoices, 
                        RelativeSource={RelativeSource AncestorType={x:Type UserControl}},  
                        Mode=OneWay}" 
          Margin="10" 
          Name="ViewPicker" 
          SelectionChanged="ViewPicker_SelectionChanged" 
          VerticalAlignment="Stretch" 
          VerticalContentAlignment="Center" />

As you can see, the ComboBox's ItemsSource is bound to a property of the UserControl that owns it called ViewChoices. The ViewChoices object is an ObservableCollection.

The contents of the ComboBox is set in code in the code behind, as the exact contents in the final code will be read from an XML file; the values are hard coded right now. Essentially, a CameraViewChoice object is created for each XML row read and added to the ViewChoices collection. This all happens in the UserControl's default constructor, after called InitializeComponent(). In the UserControl's Loaded event handler, I have code which sets the ComboBox's SelectedIndex property to 0.

The CameraViewChoice object is descended from UserControl. Here's the Xaml for this control:

<UserControl x:Class="CarSystem.CustomControls.CameraViewChoice"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:cs="clr-namespace:CarSystem.CustomControls"  
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="50">

    <Border BorderBrush="Black" BorderThickness="1">
        <Grid>
            <Image Opacity="0.35" Source="..." Stretch="Uniform" />
            <Label Content="{Binding Path=Text}" 
                   FontSize="18" 
                   FontWeight="Bold" 
                   Foreground="White" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" />
        </Grid>
    </Border>

</UserControl>

Here's the code-behind for the CameraViewChoice object:

public partial class CameraViewChoice : UserControl {

    public static readonly DependencyProperty AttachedCameraProperty =  DependencyProperty.Register( "AttachedCamera", typeof( Camera ), typeof( CameraViewChoice ), new FrameworkPropertyMetadata( null, FrameworkPropertyMetadataOptions.AffectsRender ) );

    public static readonly DependencyProperty TextProperty = DependencyProperty.Register( "Text", typeof( string ), typeof( CameraViewChoice ), new FrameworkPropertyMetadata( string.Empty, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsParentMeasure | FrameworkPropertyMetadataOptions.AffectsRender ) );

    public Camera AttachedCamera {
        get { return (Camera) GetValue( AttachedCameraProperty ); }
        set { SetValue( AttachedCameraProperty, value ); }
    }

    public string Text {
        get { return (string) GetValue( TextProperty ); }
        set { SetValue( TextProperty, value ); }
    }

    public CameraViewChoice() {
        InitializeComponent();
    }

This is all working fine but there's one problem. When the program starts running and the ComboBox displayed for the first time, the selected item is displayed all wrong. The label is blank and the CameraViewChoice control is displayed too large, so much so that the bottom of it is cut off. What I'm seeing is a blank CameraViewChoice object displayed without scaling to the ComboBox.

If I choose an item in the list, all of the choices in the list display properly and are sized properly & look fine after that, including the selected one. The problem is only when the window is first displayed.

Does anyone have any ideas about what's going on?

Tony

Edit:

I did some research on Google & MSDN Magazine and I found an article by Josh Smith about Data Templates. From there, I made the following changes to the XAML for my ComboBox:

<ComboBox Grid.Column="0" 
          Height="69" 
          HorizontalAlignment="Stretch"
          HorizontalContentAlignment="Center"
          ItemsSource="{Binding Path=ViewChoices, 
                        RelativeSource={RelativeSource AncestorType={x:Type UserControl}},  
                        Mode=OneWay}" 
          Margin="10" 
          Name="ViewPicker" 
          SelectionChanged="ViewPicker_SelectionChanged" 
          VerticalAlignment="Stretch" 
          VerticalContentAlignment="Center">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <cs:CameraViewChoice Margin="10" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

This is better as the items in the ComboBox do not change size, but the initial display is still too large. That is, it's getting cut off at the bottom. Further, the size of the selected item is consistently too large. So when you select one item in the list, it's displayed in the combobox partially clipped.

I want the choice displayed in the ComboBox with all of it fitting in side of it. Any suggestions for changes to the CombobBox's ItemTemplate?

---

In the Loaded event, provided you have at least 2 items, set the SelectedIndex to 1. After this, no matter how many items you have, call InvalidateMeasure and UpdateLayout on the ComboBox, then set the SelectedIndex to 0.

---

Here's what I think is happening.

You are using a standard ComboBox and dynamically adding UIElements to it. When the ComboBox is first displayed, there are no items, so it uses a default template. After you start adding UIElements to it, the renderer then performs it measuring and arranging. In essence, it's only learning what it should look like after the UIElements are created and inserted (but it still needed to know what to look like before that happened).

My suggestion would be to move from this development pattern to a more common methodology. Instead of creating UIElements on the fly, just create an ObservableCollection of CameraChoices (or whatever name would be appropriate). Typically this would be contained in a ViewModel.

Then instead of creating a UserControl and inserting it into the ItemsSource of the ComboBox, you'd be better served to create an ItemsTemplate (where you can use the UserControl) for the ComboBox. Alternatively, you can use a DataTemplate of the same type as the object in the ObservableCollection.

This will provide a more robust mechanism for displaying the list of items and provide you with a way to get to the raw data instead of having to deal with a UIElement when the SelectionChanged event is signaled.