Justified Alignment and Centering woes in WPF ItemsControl

Question

I have a requirement where I need to align some buttons within a fixed area of the screen. The chosen layout behaves/looks as follows;

Specifically, I need a 3 button layout where the buttons reach the edges, a 2 button layout that has equals spacing between buttons and to the edge of the container, and a single button layout that's just simply centred.

I've tried/considered;

• Negative margin on container, positive margin on buttons. (Problem is that the "2 button" layout does not have equal spacing)
• Manually calculating the margins for each control based on the number of elements in the collection using IValueConverters (Problem is that it seems overly complicated for what I'm trying to achieve, lots of maths..)
• Creating 3 separate layouts and choosing the correct one based on collection size. (Problem because it feels so, so, so very hacky)

Key Points:

• For layout 2, the gaps between the buttons should be equal to the size of the gap that reaches to the edge of the container (see the second layout in image).
• There is a logic swap between layout 2 and 3, layout 3 doesn't have "outside gaps", it only has gaps between each button.
• There is no 4 layout, no requirement for it.

So my question is: What's the "correct" way to achieve this spacing requirement? I'm looking for a simple and fairly standard way to do it.

Conclusion:

I thought it might be interesting to note that I ended up not being able to do this. The mathsy solution and the "custom control" solutions would have worked if I'd tried harder, but I ended up taking the easy route and just "centralised a listview" and had done with it.

Answer 1

First create a new Panel named DanRaysonPanel.

Edited:

class DanRaysonPanel : ItemsControl
{
    /// <summary>
    /// Holds a Grid as ItemsPanel
    /// </summary>
    public Grid GridContainer { get; set; }

    public void Refresh() => OnItemsChanged(null);

    protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
    {

        var grid = GridContainer;

        if (grid == null) return;

        grid.ColumnDefinitions.Clear();

        if (Items.Count == 1) return;

        if ((Items.Count & 1) == 0) // Element count is even
        {
            for (int i = 0; i < Items.Count * 2 + 1; i++)
            {
                if ((i & 1) == 1)
                {
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
                    Grid.SetColumn(Items[i / 2] as UIElement, i);
                }
                else grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            }
        }
        else
        {

            for (int i = 0; i < Items.Count * 2 - 1; i++)
            {
                if ((i & 1) == 0)
                {
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
                    Grid.SetColumn(Items[i/2] as UIElement, i);
                }
                else grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            }
        }

    }

}

Now add an instance of this panel to your view:

  <local:DanRaysonPanel x:Name="RaysonPanel">
    <local:DanRaysonPanel.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid HorizontalAlignment="Stretch" Loaded="Grid_Loaded">
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </local:DanRaysonPanel.ItemsPanel>

    <Button Width="100" Height="50" />

</local:DanRaysonPanel>

That ItemsPanel should declare it's ItemsPanel property explicitly. But you can edit the items as you want (Manual or Programmatically).

For the final step, you need to handle Grid_Loaded event.

  private void Grid_Loaded(object sender, RoutedEventArgs e)
    {
        RaysonPanel.GridContainer = sender as Grid;
        RaysonPanel.Refresh();
    }

P.S. The only that made this code too long is that ItemsControl.ItemsPanel doesn't give you the declared Grid in code-behind. If you found a way for that, you can make this code much simpler.

Answer 2

This will work:

<ItemsControl ItemsSource="{Binding List}" Margin="-40,0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid 
                  Columns="{Binding ListCount, Converter={StaticResource PlusOne}}" 
                  Rows="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Margin" Value="0,0,-40,0"/>
        </Style>
    </ItemsControl.ItemContainerStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Width="80" Height="55" Text="{Binding ItemName}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

PlusOne is a converter that returns its input + 1

Note that, ItemContainerStyle is used to move each item of ItemsControl to its proper position. Left and Right margins of ItemsControl, as well as Right field of the margin, should be equal to negative of half the width of each item defined in ItemTemplate.

Another note that, you can also use a Grid as the ItemsPanelTemplate and follow the instructions in this answer to have a bindable ColumnDefinitions. However, it takes WAY more effort than the provided code

Answer 3

I would put the buttons in a StackPanel and have the left margin of the Buttons define the spacing, but make the first button 0. Center the StackPanel with HoriztonalAlignment.