c# - stacklayout - xamarin forms layouts

Formas de Xamarin: StackLayout con esquinas redondeadas

Question

Estoy desarrollando una aplicación que usa formas xamarin pcl. Necesito un stacklayout con esquinas redondeadas. También he probado el marco para el contenedor de esquina redondeada, pero no hay ninguna propiedad de radio de esquina disponible para él. No puedo encontrar renderizadores para ios, android, uwp, windows 8.1.

Por favor, ¿puede alguien sugerirme cómo lograr el stacklayout con esquinas redondeadas junto con la propiedad de radio de esquina para todas las plataformas?

Answer 1

Dado que Xamarin ha lanzado el mecanismo de Effects , ahora se puede hacer implementando un efecto personalizado en ambas plataformas. Una ventaja de este enfoque es que los efectos son más ligeros, reutilizables y se pueden parametrizar y aplicar a cualquier elemento de la interfaz de usuario.

Después de crear un RoundCornersEffect personalizado heredando RoutingEffect , declarar una propiedad adjunta CornerRadius e implementar PlatformEffect en cada plataforma, se puede aplicar a cualquier diseño o control de Xamarin.Forms como este:

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

Con esquinas codificadas en el radio o un valor de los recursos.

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

Aquí hay un enlace a la implementación completa y ejemplos de uso .

Answer 2

Puede establecer esquinas redondeadas para cualquier Disposición o Vista o Celda (StackLayout, Grid, ListView)

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

Answer 3

Puede usar Frame y poner StackLayout dentro, Note Frame y rellenar 20 de manera predeterminada:

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

            </StackLayout>
</Frame>

Answer 4

Recientemente tuve la misma necesidad, por lo que creé un Representador personalizado para iOS y Android. Lo lancé como un Nuget que puedes encontrar here . El código fuente está disponible en GitHub , y aquí hay un pequeño "How-To"

¡Espero que esto ayude! Es muy fácil de usar (igual que un ContentView, que está en su base), aunque tenga en cuenta que esto es una compilación para .NET Standard, pero también puede insertar el código en su PCL

Answer 5

Utilice el siguiente para lograr su salida esperada

Control de formularios de 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 (Tenga en cuenta que algunos archivos en https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers tienen el conjunto de compilación establecido en Ninguno, estaba haciendo algunas pruebas, debo eliminarlas )

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

Answer 6

<!--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>

Acabo de intentar copiar los botones de filtro de BigBasket. Mira lo genial que se ve