PopupGallery width incorrect on first open

I am binding the ItemsSource of the Ribbon PopupGallery to an ObservableCollectoin in my ViewModel that is populated with items from an async Task. This is the XAML I have so far.

<ribbon:PopupButton Label="Basemaps" ImageSourceLarge="", ImageSourceSmall="" PopupResizeMode="Both">
  <ribbon:PopupGallery InitialColumnCount="3" VerticalScrollBarVisibility="Hidden" ItemsSource="{Binding BasemapItems}">
    <ribbon:PopupGallery.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
          <Image Source="{Binding ThumbnailUrl}" Stretch="None" />
          <TextBlock Text={Binding Name}" TextAlignment="Center" />
        </StackPanel>
      </DataTemplate>
    </ribbon:PopupGallery.ItemTemplate>
  </ribbon:PopupGallery>
</ribbon:PopupButton>

When I click the PopupButton, the first time to open the gallery items, they are all drawn in one single vertical column and the images are cut off because the column is to narrow. If I click it the second time the width of the PopupGallery seems to have updated and I can see the items correctly using three columns. I think that since the Image Source is a Url there might be a timing issue when the PopupGallery calculates its width, which seems to be before it knows how wide the image is. Its like its trying to calculate the width of the PopupGallery before it knows the width of the images because they have not been downloaded yet. I know that each of these items are 200px wide so I change the XAML to the following.

<StackPanel Orientation="Vertical" VerticalAlignment="Center" Width=200">

That works better but I wanted to make sure there was not a more dynamic approch incase the items with changes in the future.

Thanks