web-dev-qa-db-ja.com

Xamarin.Formsのセパレーター

フォームでhorizo​​ntal separator linesを使用したいと思います。私が知る限り、Xamarin.Formsは提供していません。

誰かがセパレータのスニペットを提供できますか？

更新1

ジェイソンの提案によると、これはうまく見えます：

// draws a separator line and space of 5 above and below the separator    
new BoxView() { Color = Color.White, HeightRequest = 5  },
new BoxView() { Color = Color.Gray, HeightRequest = 1, Opacity = 0.5  },
new BoxView() { Color = Color.White, HeightRequest = 5  },

以下の区切り線をレンダリングします。

enter image description here

xamarinxamarin.forms
32
SteAp

BoxViewを使用してみてください

// sl is a StackLayout
sl.Children.Add(new BoxView() { Color = Color.Black, WidthRequest = 100, HeightRequest = 2 });

私のテストでは、幅の要求に従っていません。これはバグであるか、他の設定が干渉している可能性があります。

41
Jason

実際には、Xamarin.Formsにセパレーターを表示するメソッドがあります。

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.Default;
myListView.SeparatorColor = Color.FromHex("C8C7CC");

そして非表示にする：

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.None;

それが役に立てば幸い！

9
barrast

@Jason Jasonの回答に加えて、HeightRequestを使用できるようにVerticalOptionsを設定し、WidthRequestを使用できるようにHorizo​​ntalOptionsを設定する必要があります。デフォルト値は塗りつぶされているため、応答しません。出力例

<BoxView   VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="1"
           WidthRequest="50"  
           Color="#5b5d68"></BoxView>

enter image description here

7
Umit

私のために1ピクセルスタックを追加するとうまくいきます（垂直スタックで）：

// Add a black line
MyVerticalStackLayout.Children.Add(
    new StackLayout { 
        HeightRequest = 1, 
        BackgroundColor = Color.Black, 
        HorizontalOptions = LayoutOptions.FillAndExpand
     }    
);
3
noelicus

Xamlを使用してStackLayoutにBoxViewを実装する別の方法。

これはそれを行う必要があります

<StackLayout Orientation="Vertical">
       <Label HorizontalTextAlignment="Center" Text="Header" />
       <BoxView HeightRequest="1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" />
</StackLayout>
2
Oluwasayo Babalola

stackLayoutでこれを実現できます。高さ1ピクセル、幅320ピクセル（iPhoneの画面サイズ）のStackLayoutを定義し、それを親レイアウトに追加すると役立ちます。

StackLayout myLayout = new StackLayout();
myLayout.HeightRequest=1;
myLayout.WidthRequest=320;
myLayout.BackgroundColor= Color.Black;
parentLayout.Children.Add("myLayout");
2
Vinit Saxena

NuGetパッケージを使用することもできますXamarin.Forms.Labコーディング中に役立つ非常に多くのカスタムコントロールが含まれています。

また、このパッケージには、セパレーター付きのコントロール名があります。

このリンクからパッケージをダウンロードできます。 https://www.nuget.org/packages/XLabs.Forms/

0
vishal bagdai

app.xamlファイルで独自の区切り線を定義できます。

<Style x:Key="Separator" TargetType="BoxView">
            <Setter Property="HeightRequest" Value="1" />
            <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            <Setter Property="Color" Value="Gray" />
            <Setter Property="Margin" Value="0, 5, 0, 5" />
            <Setter Property="Opacity" Value="0.5" />
</Style>

そして、スタイルとして使用します。

<BoxView Style="{StaticResource Separator}" />
0
Philipp K.