Quantcast
Channel: Recent Threads — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 204402

Image take all available height and then crop width to form square on different resolutions

$
0
0

I'm making my app adaptive for different resolutions.
I have page divided in 2 halves with Grid.RowDefinition="*", first half is green, second is red.
I'm having the problem with red part.

Big Title (text "Novice") is size "Title" and text in yellow (thumb byte testhh is font size "Small".
What I want to accomplish is for image to take all available height and set the same width and then either crop image or set Aspect="AspectFill".
Right now, image width and height are hardcoded to image (height and width are set to 210, this emulator is of resolution 1080x1920 at 420dpi)
Second image is cut off, because it's horizontal collection view, there can be any number of images with text, so it's important for them to be of the same size.
How to make this dynamic?

<Grid Padding="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackLayout Grid.Row="0" BackgroundColor="Green">
        <StackLayout Orientation="Horizontal">
            <Label
                Style="{StaticResource TitleLabel}"
                Text="{x:Static resources:AppResources.Zahtevki}" />
            <Label
                HorizontalOptions="EndAndExpand"
                Style="{StaticResource NearTitlelabel}"
                Text="{x:Static resources:AppResources.AllTasks}"
                VerticalOptions="End">
            </Label>
        </StackLayout>
        <CollectionView EmptyView="{x:Static resources:AppResources.NoTasksAvailable}" ItemsSource="{Binding Tasks}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ContentView Padding="0,0,0,0" HorizontalOptions="StartAndExpand">
                        <Frame Margin="0,0,0,5" Style="{StaticResource ZahtevkiUnfinishedFrame}">
                            <Grid Grid.Row="0" Style="{StaticResource TaskGrid}">
                                <Image
                                    Grid.Column="0"
                                    Source="alarm.png"
                                    Style="{StaticResource IconImage}"
                                    VerticalOptions="Center" />
                                <StackLayout
                                    Grid.Column="1"
                                    Spacing="0"
                                    VerticalOptions="Center">
                                    <Label
                                        LineBreakMode="TailTruncation"
                                        Style="{StaticResource ZahtevkiTopLabel}"
                                        Text="{Binding Title}" />
                                    <Label Style="{StaticResource ZahtevkiBottomLabel}" Text="{Binding Date, StringFormat='{0:dd.MM.yyyy}'}" />
                                </StackLayout>
                            </Grid>
                        </Frame>
                    </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
    <StackLayout Grid.Row="1" BackgroundColor="Red">
        <StackLayout Orientation="Horizontal">
            <Label
                Margin="5,0,0,0"
                Style="{StaticResource TitleLabel}"
                Text="{x:Static resources:AppResources.Novice}" />
            <Label
                HorizontalOptions="EndAndExpand"
                Style="{StaticResource NearTitlelabel}"
                Text="{x:Static resources:AppResources.AllNews}"
                VerticalOptions="End">
            </Label>
        </StackLayout>
        <CollectionView
            EmptyView="{x:Static resources:AppResources.NoNewsAvailable}"
            IsVisible="{Binding IsBusy, Converter={StaticResource NegateBoolConverter}}"
            ItemsLayout="HorizontalList"
            ItemsSource="{Binding NewsList}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ContentView Padding="0,0,5,0">
                        <StackLayout BackgroundColor="Yellow">
                            <forms:CachedImage
                                Aspect="AspectFill"
                                DownsampleToViewSize="True"
                                HeightRequest="210"
                                Source="{Binding files[0].Image, Converter={StaticResource Base64ToImageConverter}}"
                                WidthRequest="210" />
                            <Label
                                FontSize="Small"
                                LineBreakMode="TailTruncation"
                                Text="{Binding Title}"
                                TextColor="Black" />
                        </StackLayout>
                    </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</Grid>

Thank you all! :)


Viewing all articles
Browse latest Browse all 204402

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>