Xamarin Forms Растянутое изображение - PullRequest
Новая
       3

Xamarin Forms Растянутое изображение

0 голосов
/ 25 марта 2020

У меня проблема. Я использую следующее расширение в своем коде: https://github.com/andreinitescu/IconApp

С этим я могу контролировать цвет изображения. Я реализовал это в своем собственном коде так: 

<StackLayout Orientation="Vertical">
    <StackLayout HeightRequest="70" BackgroundColor="#013252" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <Image Source="arrow_back" VerticalOptions="CenterAndExpand" HeightRequest="30" Margin="10,0,0,0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="btnBack_Clicked" />
            </Image.GestureRecognizers>
        </Image>

        <Label x:Name="txtDeviceName" TextColor="White" FontSize="30" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Margin="10,0,0,0" />
    </StackLayout>

    <Grid Padding="0" HorizontalOptions="FillAndExpand" Margin="40,30,40,0" x:Name="gridLedstrip" HeightRequest="0">
        <controls:IconView x:Name="imgLedstrip" Source="ledstrip" BackgroundColor="White" />
    </Grid>


    <Grid Padding="0" HorizontalOptions="FillAndExpand" Margin="40,30,40,0" x:Name="gridCanvas" HeightRequest="500" IsVisible="False">
        <views:SKCanvasView x:Name="skiaView"
                PaintSurface="OnCanvasViewPaintSurface" />
        <Grid.Effects>
            <tt:TouchEffect Capture="True"
                TouchAction="OnTouchEffectAction" />
        </Grid.Effects>
    </Grid>

    <Label Text="BRIGHTNESS" TextColor="White" FontSize="20" Margin="40,0,40,0" />
    <StackLayout Orientation="Horizontal" Margin="40,0,40,0">
        <Slider x:Name="sliderBrightness" Minimum="0" Maximum="100" VerticalOptions="CenterAndExpand"
                HorizontalOptions="FillAndExpand" ValueChanged="sliderBrightness_ValueChanged" DragCompleted="sliderBrightness_DragCompleted" />
        <Label x:Name="txtBrightness" TextColor="White" FontSize="18" />
    </StackLayout>

</StackLayout>

Теперь проблема в том, что ledstrip.png представляет собой квадрат, когда вы смотрите на размер изображения, потому что это 600x600, но когда я показываю его на экране с черным фоном я вижу, что этот IconView растянут до максимальной высоты. Как я могу сделать высоту равной ширине.

Я уже пробовал: 

gridLedstrip.HeightRequest = gridLedstrip.WidthRequest;

Но независимо от того, что я заполняю в HeighRequest, он просто растягивается!

Есть предложения?

Ответы [ 2 ]

1 голос
/ 25 марта 2020

Чтобы избежать искажения изображения, используйте Aspect = "AspectFit"

 <Image Aspect="AspectFit" Source="arrow_back" VerticalOptions="CenterAndExpand" HeightRequest="30" Margin="10,0,0,0">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="btnBack_Clicked" />
    </Image.GestureRecognizers>
</Image>
0 голосов
/ 25 марта 2020

Попробуйте 

HorizontalOptions="CenterAndExpand"

Это не должно искажать изображение, если у него другое соотношение сторон, как у сетки.

...