Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontally Stretch Content in an ItemsControl

I have a itemscontrol, but, the items are being aligned to the left and I can't figure out how to Stretch them Horizontally.

Here is my XAML:

    <ItemsControl x:Name="ItemsSnaps" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

            </StackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button x:Name="ButtonSnap" HorizontalAlignment="Stretch" Style="{StaticResource EmptyItemSourceAction}" Tag="{Binding}" 
                    toolkit:TiltEffect.IsTiltEnabled="{Binding Converter={StaticResource IValueCheckIfSnapWasRecieved}}"
                    Click="ButtonSnap_Click" 
                    ManipulationCompleted="ButtonSnap_ManipulationCompleted" 
                    ManipulationStarted="ButtonSnap_ManipulationStarted">
                <Grid Tag="{Binding}" Height="80">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="{Binding Converter={StaticResource IValueIconFromSnapMediaType}}" Margin="10" Stretch="UniformToFill" />

                    <StackPanel Grid.Column="1" VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Foreground="#FF616161" Text="{Binding FallbackValue=alexerax, Converter={StaticResource IValueActiveUserFromSnap}}" FontSize="18.667"></TextBlock>

                            <TextBlock Foreground="#FF616161" FontSize="18.667" Text="-" Margin="5,0,5,0" />

                            <TextBlock Foreground="#FF616161" FontSize="18.667" TextTrimming="WordEllipsis" Text="{Binding Path=Timestamp, FallbackValue=18/08/94 - 14:34, Converter={StaticResource IValueFriendlyTimeFromSnapChatTimestamp}}" />
                        </StackPanel>
                        <TextBlock FontSize="13.333" Text="{Binding FallbackValue=Pending..., Converter={StaticResource IValueFriendlySnapStatus}}">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource FapAccent}"/>
                            </TextBlock.Foreground>
                        </TextBlock>
                        <ProgressBar Width="150" Visibility="{Binding Converter={StaticResource IValueCheckIfSnapIsDownloading}}" HorizontalAlignment="Stretch" IsIndeterminate="True"></ProgressBar>
                    </StackPanel>

                    <ContentControl VerticalAlignment="Center" Grid.Column="2">
                        <TextBlock Text="10" >
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource FapAccent}"/>
                            </TextBlock.Foreground>
                        </TextBlock>
                    </ContentControl>
                </Grid>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
like image 573
Alexander Forbes-Reed Avatar asked Feb 02 '26 20:02

Alexander Forbes-Reed


1 Answers

Could you not use %tage based grid.columns to align them? 10s in column 2 with a hard Ypx width, rest in colummn 1 of 1*px

EG:

 <Grid Height="50">

      <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/> <!-- scale to fit rest -->
           <ColumnDefinition Width="50"/>
      </Grid.ColumnDefinitions>

      <StackPanel Orientation="Vertical" Grid.Column="1">
      <!-- main stuff-->
      </StackPanel>

      <StackPanel Orientation="Vertical" Grid.Column="2">
      <!-- right orientated text [10s] -->
      </StackPanel>

  </Grid>
like image 115
Kaelan Fouwels Avatar answered Feb 05 '26 13:02

Kaelan Fouwels



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!