locked
How to create a layout with images side by side in XAML, where the image is upscaled to fit the screen height?

    Question

  • How to create a horizontal layout in XAML where I have several images side by side in one or two rows?

    The image height must always be 100% while respecting the aspect ratio. If there are more images than the screen can display at once, then you must be able to scroll horizontally. There should be no space between the images.

    I created two example videos to make clear what I am trying to achieve.

    One Row
    http://gfycat.com/LegalGoodCanadagoose

    Two Rows
    http://gfycat.com/PessimisticAdorableFrenchbulldog

    I tried to use a GridView, but failed to assign a height of 100% I am not married with the GridView, though, but I need to be able to bind it to an ItemSource.

    Thursday, November 06, 2014 7:57 PM

Answers

  • Hi,

    Your way are right,

    This kind of layout is done by GridView

    You need to is using datatemplate in GridView to change every ItemContainerStyle "margin".

     
     <GridView.ItemContainerStyle>
         <Style TargetType="FrameworkElement">
                <Setter Property="Margin" Value="0 0 0 0"/>
          </Style>
     </GridView.ItemContainerStyle>

    Friday, November 07, 2014 8:45 AM
  • Hi ϻοϰsϯεr

    To remove the space between gridview items you may need customize the GridViewItem template: GridViewItem styles and templates, set the margin as 0:

            <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,2,2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <GridViewItemPresenter
                                CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                ContentMargin="0" ContentTransitions="{TemplateBinding ContentTransitions}" 
                                CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" 
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                                SelectionCheckMarkVisualEnabled="True" 
                                SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
                                SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                                SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}" 
                                SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    if you want to display lines, you may want this:

            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <ItemsWrapGrid Orientation="Horizontal" />
            </ItemsPanelTemplate>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, November 07, 2014 9:55 AM
    Moderator

All replies

  • Hi,

    Your way are right,

    This kind of layout is done by GridView

    You need to is using datatemplate in GridView to change every ItemContainerStyle "margin".

     
     <GridView.ItemContainerStyle>
         <Style TargetType="FrameworkElement">
                <Setter Property="Margin" Value="0 0 0 0"/>
          </Style>
     </GridView.ItemContainerStyle>

    Friday, November 07, 2014 8:45 AM
  • Hi ϻοϰsϯεr

    To remove the space between gridview items you may need customize the GridViewItem template: GridViewItem styles and templates, set the margin as 0:

            <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,2,2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <GridViewItemPresenter
                                CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                ContentMargin="0" ContentTransitions="{TemplateBinding ContentTransitions}" 
                                CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" 
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                                SelectionCheckMarkVisualEnabled="True" 
                                SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
                                SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                                SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}" 
                                SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    if you want to display lines, you may want this:

            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <ItemsWrapGrid Orientation="Horizontal" />
            </ItemsPanelTemplate>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, November 07, 2014 9:55 AM
    Moderator
  • Thank you, that was it!

    Now for the last question: I want to change this to have two or more rows. It should be sorted like this:

    1, 4, 7, …
    2, 5, 8,
    3, 6, 9,
    Is this easily achievable and how?

    This is the code I am having now:

    <Page.Resources>
            <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
            <x:String x:Key="AppName">Hello, photo!</x:String>
            <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <GridViewItemPresenter ContentMargin="0" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
    
    <GridView x:Name="photoGridView" Grid.Row="1" ItemsSource="{Binding Photos}" ItemContainerStyle="{StaticResource GridViewItemStyle}">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding PosterPath}"/>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>


    Friday, November 07, 2014 1:09 PM
  • Hi ϻοϰsϯεr,

    MaximumRowsOrColumns property is your friend, you can set the number as 3 to display 3 rows.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, November 11, 2014 6:09 AM
    Moderator