質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

2回答

5839閲覧

Xamarin.FormsのEntry内の上下の余白を縮めたい。

M.inose

総合スコア17

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

1グッド

1クリップ

投稿2017/09/06 04:43

###前提・実現したいこと
Xamarin.FormsのEntryは、Xamarin.AndoridのEditText比べ
コントロールの矩形部分とコントロール内のテキスト部分との上下の余白が長いです。

Entry内に表示されるテキストとEntryコントロールの矩形部分との上下の余白をXamarin.Andoridの様に
縮める方法を調べているのですが情報がありません。

Entryコントロール内に表示されているテキストの上下の余白の縮め方、縮め方の情報(サイトのURL等)をご教示いただければ幸いです。

何卒、よろしくお願い申し上げます。

###開発環境
Visual studio 2015
Xamain 4.6.0.297

Tak1wa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

Entryコントロール用のカスタムレンダラーを用いてカスタムコントロールを作成して
Entry内に表示されるテキストとEntryコントロールの矩形部分の上下の余白との長さ(Padding)を
調整することができました。

イメージ説明

まず、メイン画面にカスタムコントロールの基底クラス(例ではCCustomEntry)を定義します。
このクラスはXamarin.Formsのソリューションの共有部分に配置すれば
別ファイルで定義しても構いません。

C#

1using Xamarin.Forms; 2namespace App1 { 3 //////////////////////////////////////////////////// 4 // 5 // Custom Entryのサンプル 6 // 7 //////////////////////////////////////////////////// 8 9 // Custom Entryの基底クラスを定義 10 public class CCustomEntry : Entry 11 { 12 13 } 14 15 public class App : Application 16 { 17 public App() 18 { 19 //Entryコントロールを2つ配置したスタックレイヤを生成する 20 var stackLayout = new StackLayout 21 { 22 Padding = new Thickness(10, Device.OnPlatform(20, 10, 10), 10, 10), 23 Spacing = 5, //各要素間のスペース 24 BackgroundColor = Color.FromHex("FFFFFF"), 25 Children = { 26 new Entry{ 27 FontSize=30, 28 Text = "Nomal", 29 TextColor = Color.FromHex("000000"), 30 BackgroundColor = Color.FromHex("00FFFF") 31 }, 32 33 new CCustomEntry{ 34 FontSize=30, 35 Text = "Custom", 36 TextColor = Color.FromHex("000000"), 37 BackgroundColor = Color.FromHex("00FF00"), 38 }, 39 40 } 41 }; 42 MainPage = new ContentPage 43 { 44 Content = stackLayout 45 }; 46 } 47 } 48} 49

次にAndoridプラットフォームのプロジェクトにEntryコントロール用のカスタムレンダラーを作成します。

C#

1using App1; 2using App1.Droid; 3using Xamarin.Forms; 4using Xamarin.Forms.Platform.Android; 5 6[assembly: ExportRenderer(typeof(CCustomEntry), typeof(CCustomEntryRenderer))] 7 8namespace App1.Droid 9{ 10 public class CCustomEntryRenderer : EntryRenderer 11 { 12 protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 13 { 14 base.OnElementChanged(e); 15 16 if (Control == null) 17 return; 18 19 // Entryのコントロール枠とテキスト部とのパディグを設定 20 Control.SetPadding(0, 0, 0, 0); 21 } 22 } 23} 24

以上の様に、Entryコントロールの矩形部分の上下の余白との長さ(Padding)を調整することができました。

投稿2017/09/08 02:26

M.inose

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

見当違いの回答でしたらすみません。
マイナスのMarginを設定することで
やりたいことが実現できるかもしれません。
<Entry Margin="0,-10,0,-10" />

追記
お役に立てず、申し訳ありません。
私が似たような問題に直面したときは、
Entry自身の高さを縮めることができなかったため、
以下のようにマイナスのMarginで対応したことがありました。
(下記サンプルコードでは、gridとstacklayoutのspacingを0にするのが先決ですが。)

何かのご参考になればと思います。

xaml

1<?xml version="1.0" encoding="utf-8"?> 2<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:Sample;" x:Class="Sample.LoginPage" Title="AppName"> 3 <Grid> 4 <Grid.ColumnDefinitions> 5 <ColumnDefinition Width="*" /> 6 <ColumnDefinition Width="*" /> 7 </Grid.ColumnDefinitions> 8 <StackLayout Grid.Column="0"> 9 <Entry Text="hoge1" BackgroundColor="LightGray" /> 10 <Entry Text="hoge2" BackgroundColor="LightGray" /> 11 <Entry Text="hoge3" BackgroundColor="LightGray" /> 12 </StackLayout> 13 <StackLayout Grid.Column="1"> 14 <Entry Text="fuga1" BackgroundColor="LightBlue" Margin="0,-5,0,-5" /> 15 <Entry Text="fuga2" BackgroundColor="LightBlue" Margin="0,-5,0,-5" /> 16 <Entry Text="fuga3" BackgroundColor="LightBlue" Margin="0,-5,0,-5" /> 17 </StackLayout> 18 </Grid> 19</ContentPage>

Android
iOS

投稿2017/09/06 10:16

編集2017/09/06 13:21
kfukuda

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

M.inose

2017/09/06 11:26

kfukuda様 早々のご回答ありがとうございました。 早速、ご回答の方法を試してみました。 結果は残念ながら、Entry内に表示されるテキストとEntryコントロールの矩形部分の上下の余白との長さ(距離)は変わりませんでした。 (Entryコントロールの表示が-10の位置になりました。)
M.inose

2017/09/07 02:48 編集

kfukuda様 追記の情報、大変にありがとうございました。 サンプルソースまで、ご提示いただき感謝申し上げます。 Entryコントロール用のカスタムレンダラーを用いてカスタムコントロールを作成するしか方法がなさそうです。 以下のサイトにiOS用ですがヒントになる情報がありました。 https://stackoverflow.com/questions/37944109/how-to-set-top-padding-of-entry-in-xamarin-forms この方法でEntryのPaddingを調整できればいいのですが。 ともあれ、ヒントになる情報をいただき大変にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問