web-dev-qa-db-ja.com

Xamarin Forms：角が丸いStackLayout

Xamarin Forms PCLを使用してアプリを開発しています。角が丸いStackLayoutが必要です。角の丸いコンテナにもフレームを試しましたが、角の半径プロパティはありません。 iOS、Android、UWP、Windows 8.1用のレンダラーが見つかりません。

すべてのプラットフォームで角丸プロパティと角丸プロパティを使用してStackLayoutを実現する方法を教えてください。 enter image description here

c#xamarin.formsportable-class-library
36
Sonali

Frameを使用してStackLayoutを内部に配置できます。デフォルトでは、Frameはパディング20を取得します。

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

            </StackLayout>
</Frame>
44
Abdullah Tahan
<!--Curved stack-->
<Frame CornerRadius="5" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           IsClippedToBounds="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のフィルターボタンをコピーしようとしました。 見栄えの良さを参照

12
prasadsunny1

Xamarinは Effects メカニズムをリリースしたので、両方のプラットフォームにカスタムエフェクトを実装することで実行できるようになりました。このアプローチの利点は、エフェクトがより軽量で再利用可能であり、パラメーター化して任意のUI要素に適用できることです。

カスタムRoundCornersEffect継承RoutingEffectを作成し、CornerRadius添付プロパティを宣言し、各プラットフォームにPlatformEffectを実装した後、任意のXamarin.Formsレイアウトに適用できます。このような制御：

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

ハードコードされたコーナー半径またはリソースからの値

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

完全な実装と使用例 へのリンクを次に示します。

10
foxanna

以下を使用して、期待される出力を達成します。

Xamarin Formsコントロール： 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.cshttps://github.com/nitescua/ Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs （ https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droidのいくつかのファイルに注意してください/ Renderers コンパイルをNoneに設定しました。いくつかのテストを行っていたので、それらを削除する必要があります）

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

6
Jay Patel

最近同じニーズがあったので、iOSとAndroidの両方にカスタムレンダラーを作成しました。 here を見つけることができるNugetとしてリリースしました。ソースコードは GitHub で入手でき、ここに少し "How-To" があります。

お役に立てれば！これは.NET Standard向けにコンパイルされていることに注意してください（ただし、ベースにあるContentViewと同じです）が、PCLにコードをプルすることもできます。

0
Tom

任意のレイアウトまたはビューまたはセル（StackLayout、Grid、ListView）に丸い角を設定できます

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

0
Venkata Swamy Balaraju