Формы Xamarin: StackLayout с закругленными углами

Я занимаюсь разработкой приложения с использованием Xamarin Forms PCL. Мне нужен StackLayout с закругленными углами. Я также пробовал рамку для контейнера с закругленными углами, но для него нет свойства радиуса угла. Я не могу найти средства визуализации для iOS, Android, UWP, Windows 8.1.

Пожалуйста, кто-нибудь может подсказать мне, как добиться StackLayout с закругленными углами вместе со свойством углового радиуса для всех платформ.

Ответы

Ответ 1

Вы можете использовать Frame и поместить StackLayout внутрь, Note Frame принять заполнение 20 по умолчанию:

<Frame CornerRadius="10"  
       OutlineColor="Red" 
       Padding="0">
            <StackLayout>

            </StackLayout>
</Frame>

Ответ 2

<!--Curved stack-->
<Frame CornerRadius="5" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           Padding="0">
        <StackLayout Padding="10,5,10,5"   
                         Orientation="Horizontal" 
                         BackgroundColor="White"  >
            <Image Source="settingsIcon"  
                   HeightRequest="25" 
                   WidthRequest="25" 
                   Aspect="Fill" />
            <Label Text="Filter" 
                   FontSize="Medium" 
                   VerticalTextAlignment="Center" 
                   VerticalOptions="Center"/>
        </StackLayout>
    </Frame>

Я просто попытался скопировать кнопки фильтра BigBasket. Посмотрите, как круто это выглядит

Ответ 3

Используйте следующее для достижения ожидаемого результата;

Xamarin Формы контроля: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls/Border.cs

IOS: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.iOS/Renderers/BorderRenderer.cs

Android: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRenderer.cs https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs (Примечание некоторых файлов https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers имеют компиляции значение Нет, я делал некоторые тесты, нужно удалить те )

WinPhone: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.WinPhone/Renderers/BorderRenderer.cs

Ответ 4

Поскольку Xamarin выпустил механизм Effects, теперь это можно сделать путем реализации настраиваемого эффекта на обеих платформах. Преимущество этого подхода состоит в том, что эффекты являются более легкими, могут использоваться повторно и могут параметризоваться и применяться к любому элементу пользовательского интерфейса.

После создания настраиваемого RoundCornersEffect унаследованного от RoutingEffect, объявления присоединенного свойства CornerRadius и реализации PlatformEffect на каждой платформе, его можно применить к любому макету или Xamarin.Forms управления Xamarin.Forms например так:

<StackLayout effects:RoundCornersEffect.CornerRadius="48"/>

с жестко закодированным радиусом углов или значением из ресурсов

 <BoxView effects:RoundCornersEffect.CornerRadius="{StaticResource LargeCornerRadius}" />

Вот ссылка на полную реализацию и примеры использования.

Ответ 5

Вы можете установить закругленный угол для любого макета или вида или ячейки (StackLayout, Grid, ListView)

http://venkyxamarin.blogspot.in/2017/12/how-to-set-corner-radius-for-view.html#more

Ответ 6

У меня недавно была такая же потребность, поэтому я создал Custom Renderer для iOS и Android. Я выпустил его как Nuget, который вы можете найти здесь. Исходный код доступен на GitHub, и вот немного "How-To"

Надеюсь это поможет! Он очень прост в использовании (такой же, как ContentView, на котором он основывается), хотя обратите внимание, что это компиляция для .NET Standard, но вы также можете вставить код в PCL