web-dev-qa-db-ja.com

ボタンのアイコンとテキストを中央に配置するXamarin XAML

アイコンをボタンの中央に配置してテキストの上に配置する方法はありません。それに関する情報も見つかりませんでした。一種の「タブ」オプションメニューを実行するように求められましたが、画面の下で、 「デザインへの影響」などの理由で「難しい」と感じたので、ボタンを使用する方が簡単だと判断しましたが、問題は画像を中央に配置してテキストを正しく表示する方法です。私、それは素晴らしいことです。これはこれまでのところ私のコードです：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.Microsoft.com/winfx/2009/xaml"
         BackgroundColor="Silver"
         x:Class="XamForm.View.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center"  HorizontalOptions="Center" />


 <StackLayout Padding="30">
<Label x:Name="lblCuantos" Text="No #" TextColor="Gray" FontSize="20"/>
<Label x:Name="lblNombre" Text="" FontSize="20"/>
<Button  x:Name="btn1" Text="Oprimir" Clicked="Accion"/>
<Button  x:Name="btn2"  BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2"/>
<Button  x:Name="btn3"  BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand"  TextColor="Gray" Clicked="Accion2"/>


</StackLayout>
</ContentPage>

これは、ボタン自体の実際の結果です。

http://oi59.tinypic.com/11so9le.jpg

これはメニューの最終結果が親切に見えるはずです

http://oi62.tinypic.com/10pzw2f.jpg

ありがとうございました！

imagexamlbuttonxamarin
9
elunap

ボタンでContentLayout="Top,0"を使用できます。あなたの場合の例として、以下のコードを使用してください

<Button  x:Name="btn2" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2" />
<Button  x:Name="btn3" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand"  TextColor="Gray" Clicked="Accion2"/>
29
Tushar patel

StackLayoutをOrientationをVerticalに設定して使用し、その中にButtonとLabelを追加できます。

2
Artur Malendowicz

Button.ImageプロパティはFileImageSource型であるため、「ローカル」の任意の画像をボタンで使用できます。つまり、次のコードが機能します。

someButton.Image = "imageName.png";

またはあなたは書くことができます

someButton.Image = ImageSource.FromFile("imageName.png");

ifimageName.pngが各アプリケーションプロジェクト（iOSのResourcesフォルダー、AndroidのResources/Drawableフォルダー、WinPhoneのアプリケーションルート）にある場合、それぞれ適切なビルドアクションセット）。

対応するXamlは次のとおりです。

<Button Text="Has Image" Image="someImage.png" />

各プラットフォームでのビルドアクションの詳細については、 Working with Images doc を参照してください。

0
Hemant Ramphul