ItemsControl same sized Items

Question

this is my first post here, so be tolerant for any possible mistakes I made here ;)

I am building an App where I want to have a tab Layout. So I am currently using this code:

<Grid Margin="0,97,0,0" Height="50" VerticalAlignment="Top">
        <ItemsControl Margin="0,0,0,0" x:Name="itemsControl" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock  Text="{Binding name}" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
    <FlipView x:Name="flipView" Margin="0,147,0,0" ItemsSource="{Binding groups}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding articles}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding category}"/>
                                <TextBlock Text="{Binding title}"/>
                                <Image Source="{Binding image}"></Image>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

I would like the Items to fill the width of the ItemsControl and be equally sized.

Thank You. Luca

Edit: Just to better explain what I want to archieve: I want tabs looking like the "365 Steps", "News", "Event", "Archiv" tabs in the Picture

Possible duplicate: http://stackoverflow.com/questions/1270078/stretching-controls-to-fill-itemscontrol — Yacoub Massad, Jan 14 '16 at 21:47
No it is not, because I'm developing an universal app. Some of the Panels aren't available here like the DockPanel or UniformGrid, which are suggested in the thread you've linked to. — lal12, Jan 14 '16 at 22:00
For starters, you might add some ColumnDefinition's to your Item's Grid so your Category, Title, and Image don't just stack on top of another. Then try also adding something like [this](http://stackoverflow.com/questions/15067309/listviewitem-wont-stretch-to-the-width-of-a-listview) just for starters. — Chris W., Jan 14 '16 at 22:15
Which `ItemsControl`? The `itemsControl` one? Or the `flipView` (which is also `ItemsControl`)? "Equally sized" how? Width? Height? Both? Please provide a good [mcve] that shows clearly what you've got so far, along with a precise description of what that code does now, and what you'd like it to do instead. — Peter Duniho, Jan 14 '16 at 23:11
why are you using an ItemsControl for the header aren't those item supposed to be fix? why you won't simply define a Grid with multiple columns instead ? — SamTh3D3v, Jan 14 '16 at 23:12
No these Items shall be loaded dynamically from my Binded ItemsSource. — lal12, Jan 15 '16 at 23:06

Ivan Zinovyev · Accepted Answer · 2017-06-18T20:40:31.183

You can use Pivot to achive something like this:

In order to do this you can use this code:

<Grid x:Name="grid">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" x:Name="item1" Background="DarkBlue" Tapped="item1_Tapped"/>
        <Grid Grid.Column="1" x:Name="item2" Background="Orange" Tapped="item2_Tapped"/>
        <Grid Grid.Column="2" x:Name="item3" Background="DarkGray" Tapped="item3_Tapped"/>
    </Grid>
    <Pivot x:Name="rootPivot" IsHitTestVisible="False" Margin="0,52,0,0">
        <PivotItem Margin="0">
            <TextBlock Text="Content of pivot item 1."/>
        </PivotItem>
        <PivotItem Margin="0">
            <TextBlock Text="Content of pivot item 2."/>
        </PivotItem>
        <PivotItem Margin="0">
            <Grid Background="LightGray">
                <TextBlock Text="Content of pivot item 3."/>
            </Grid>
        </PivotItem>
    </Pivot>
</Grid>

item_Tapped() event handler:

private void item3_Tapped( object sender, TappedRoutedEventArgs e )
{
    rootPivot.SelectedIndex = 2;
}

you can improve this by getting rid of the sizechanged by using grid/column with width all equal to "*". see my answer for that technique. nice answer though, so i upvoted it. welcome to SO. — Kory Gill, Jan 16 '16 at 00:59

score 0 · Answer 2 · answered Jan 15 '16 at 08:29

Take a look at a complete example on how to do this here: https://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/

Import parts are

<Setter Target="HeaderClipper.HorizontalContentAlignment" Value="Center" />

Setting the HorizontalContentAllignment to get the centering
Taking care of the incorrect default height of a pivot header! The default template has 48 set as height and that would not be enough in most cases!

score 0 · Answer 3 · answered Jan 16 '16 at 00:52

The other answers with using Pivot are probably the direction you might go. If you wanted to play around a bit you could create your own, but you might sacrifice some ability to have what the Pivot offers you automatically.

I totally threw this together in like 5 minutes to demonstrate how you can create your own UI for what you want. I did not put in anything like bindings, optimize how the menu would use a single property and converter detect which highlight to show, etc.

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Tapped="OnTapped" Tag="0">
            <TextBlock Text="365 Steps" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R0"/>
        </Grid>
        <Grid Grid.Column="1" Tapped="OnTapped" Tag="1">
            <TextBlock Text="News" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R1" Visibility="Collapsed"/>
        </Grid>
        <Grid Grid.Column="2" Tapped="OnTapped" Tag="2">
            <TextBlock Text="Event" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R2" Visibility="Collapsed"/>
        </Grid>
        <Grid Grid.Column="3" Tapped="OnTapped" Tag="3">
            <TextBlock Text="Archive" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R3" Visibility="Collapsed"/>
        </Grid>
    </Grid>

    <ListView Grid.Row="1" Name="MyList">
        <ListBoxItem>Foo</ListBoxItem>
        <ListBoxItem>Bar</ListBoxItem>
    </ListView>
</Grid>

Code

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        R0.Visibility = Visibility.Visible;
        R1.Visibility = Visibility.Collapsed;
        R2.Visibility = Visibility.Collapsed;
        R3.Visibility = Visibility.Collapsed;
    }

    private void OnTapped(object sender, TappedRoutedEventArgs e)
    {
        var grid = sender as Grid;
        string tag = grid.Tag as string;
        // do more stuff depending on tag
        switch (int.Parse(tag))
        {
            case 0:
                R0.Visibility = Visibility;
                R1.Visibility = Visibility.Collapsed;
                R2.Visibility = Visibility.Collapsed;
                R3.Visibility = Visibility.Collapsed;
                MyList.DataContext = null;  // todo: SET TO YOUR DATA MODEL
                break;

            case 1:
                R1.Visibility = Visibility;
                R0.Visibility = Visibility.Collapsed;
                R2.Visibility = Visibility.Collapsed;
                R3.Visibility = Visibility.Collapsed;
                break;
        }
    }
}

This is not meant as a complete solution, just a jump start on and idea you can inspire from. Depends on your project, intended audience, and many other factors for what design is best for your case.

ItemsControl same sized Items

3 Answers3