locked
Implement relative heights in XAML already! RRS feed

  • General discussion

  • I am puzzled why Microsoft is not offering an easy way to set relative heights for XAML elements, other than 100%, which is represented in XAML by height="0" or simply no height-attribute at all. This has been around in HTML since 1993!

    It is impossible to have, for example, a GridView whose GridViewItems have 50% (2-columns) or 25% (4 columns)!

    <GridView ItemsSource="{Binding MyItems}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding MyItemImage}" Height="50%"/> <!-- WONT WORK! FRUSTRATING! -->
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

    Please do implement this simple feature. I cannot believe this has not already been done years ago!

    Saturday, November 15, 2014 11:36 AM

All replies

  • xaml isnt html. so things work differently try this:

    <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Image Source="{Binding MyItemImage}"/>
                
            </Grid>
            


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Saturday, November 15, 2014 2:21 PM
  • To tackle the height problem, I need to use a Grid instead of a GridView? And trade in one problem with dozens of other problems?
    Saturday, November 15, 2014 3:48 PM
  • no just put this grid in your datatemplate.

    and do you mean 50% of the whole page of just 50% of the list item?


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#


    Saturday, November 15, 2014 4:04 PM
  • The GridViewItem-height should always 50% of the GridView-height.

    Putting your code in the DataTemplate works somehow. But I am not sure why? Because the RowDefinition is inside the Grid, but it still stacks somewhat correctly with the other Grids.

    Anyway, why is the first item correct, but the others aren't?

    asads
    <Page
        x:Name="pageRoot"
        x:Class="MovieLibrary.VideoPage"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MovieLibrary"
        xmlns:common="using:MovieLibrary.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Loaded="pageRoot_Loaded">
    
        <Page.Resources>
            <local:SetPercentageConverter x:Key="SetPercentageConverter"/>
            <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
            <x:String x:Key="AppName">Hello, video!</x:String>
            <Style x:Key="GridViewItemStyle" 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"/>
            	<Setter Property="Template">
            		<Setter.Value>
            			<ControlTemplate TargetType="GridViewItem">
            				<GridViewItemPresenter x:Name="gridViewItemPresenter" CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 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}">
            					<VisualStateManager.VisualStateGroups>
            						<VisualStateGroup x:Name="CommonStates">
            							<VisualState x:Name="Normal"/>
            							<VisualState x:Name="PointerOver"/>
            							<VisualState x:Name="Pressed"/>
            							<VisualState x:Name="PointerOverPressed"/>
            							<VisualState x:Name="Disabled"/>
            						</VisualStateGroup>
            					</VisualStateManager.VisualStateGroups>
            				</GridViewItemPresenter>
            			</ControlTemplate>
            		</Setter.Value>
            	</Setter>
            </Style>
            
        </Page.Resources>
        <Page.TopAppBar>
            <CommandBar x:Name="commandBar">
                <AppBarButton x:Name="SyncMovieLibraryButton" Icon="SyncFolder" Label="Sync Movie Library" Click="SyncMovieLibraryButton_Click"/>
                <AppBarButton x:Name="SetMovieLibraryButton" Icon="Folder" Label="Set Movie Library" Click="SetMovieLibraryButton_Click"/>
            </CommandBar>
        </Page.TopAppBar>
    
        <GridView x:Name="videoGridView" ItemsSource="{Binding Movies}" ItemContainerStyle="{StaticResource GridViewItemStyle}" Padding="0" SelectionMode="None">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Image Source="{Binding PosterPath}" Loaded="Image_Loaded" RightTapped="Image_RightTapped" />
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Page>
    


    Saturday, November 15, 2014 5:23 PM
  • The gridview is using the height and width of the first item to size the rest of the items.  If you want differently sized items, you'd have to use something like these techniques:

    http://blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.htmlhttps://code.msdn.microsoft.com/windowsapps/GridView-with-variable-b2346047

    http://www.wintellect.com/blogs/sloscialo/windows-8-gridview-and-variable-sized-items


    Darin R.

    Saturday, November 15, 2014 5:33 PM
  • No, I want the other items to have have the exact same size as the first item. Instead, they are cropped and black bars appear.

    • Edited by ϻοϰsϯεr Saturday, November 15, 2014 5:35 PM
    Saturday, November 15, 2014 5:35 PM
  • Okay, so doing it programmatically took me 1 minute and 5 rows. Long live XAML 😒

    private void Image_Loaded(object sender, RoutedEventArgs e)
    {
        Image image = (Windows.UI.Xaml.Controls.Image)sender;
        image.Height = videoGridView.ActualHeight / 2;
    }


    • Edited by ϻοϰsϯεr Saturday, November 15, 2014 7:49 PM
    Saturday, November 15, 2014 7:48 PM