ItemsControl Windows Phone中的项目间距

Question

I am generating buttons on the fly. The List<Button> is bound to the an ItemsControl:

<ItemsControl ItemsSource="{Binding MyButtons}" Padding="0" 
    Style="{StaticResource HorizontalStackPanel}" />

Here is the style definition:

<Style x:Key="HorizontalStackPanel" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Margin="0"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

A button is generated using the following method:

private Button MakeAButton(string letter)
{
    Button b = new Button
    {
        Margin = new System.Windows.Thickness(-2),
        CommandParameter = letter
    };

    b.Content = new TextBlock { Text = letter, FontSize = 24, FontFamily = new System.Windows.Media.FontFamily("Segoe UI Mono") };
    b.Click += b_Click;
    return b;
}

The number of buttons varies every time. I need them to be all visible on the phone page and be spread apart such that the user has an easy time pushing the buttons.

Problem: Buttons are spread out inside ItemsControl in such a way so that if there are more than 8 buttons in the collection, they start disappearing from the screen. Controlling the space by setting the Margin on buttons works, but then I have to adjust it for every number of items in the collection. Setting MaxWidth on the ItemsControl does not work. I measured my buttons individually and the sum of all .DesiredSize does not exceed 250px.

Questions: Is there a way to programmatically control the space between items within ItemsControl? More importantly, what mechanism does ItemsControl use to space items within it?

Answer 1

You should use a WrapPanel instead of a StackPanel . A WrapPanel allows the content to wrap around the screen and not go off the screen. You can use the WrapPanel within the Windows Phone Toolkit or Telerik's controls or any other third party WrapPanel.

If using the WP Toolkit, modify you style to be as such

<Style x:Key="HorizontalStackPanel" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>