WPF-すぐに実行できる[Label：Input]コントロールのベストプラクティス

Question

WPFでよく知られているラベル入力[または出力は重要ではありません]の組み合わせを取得するための最良かつ迅速な方法であると思います。その単純なタスクは、「オブジェクト」のクイック出力を考えるだけです。 ME：

---

名前-クリスチャン

年齢-28

気分-良い

---

TextBlocksでグリッドを使用できることはわかっています。しかし、正直に言うと、「短い」このためのXAMLはほぼ半分のページの長さです（各ラベルのRowDefinitions、ColDefs、Grid.Col）

別の方法、1つの垂直で3つのStackPanel（水平）を使用することも少し愚かなようです。この場合、インデントを正しくするために、各ラベルに固定幅を与える必要があります。そして、それはただ「感じ」ません。

つまり、上記の状況を考えると、GUIに読み取り専用としてダンプしたい3-6個のプロパティを持つカスタムオブジェクトを取得しました。 ：）。

もちろん、このためのユーザーコントロールを作成できます。しかし、車輪が既にあるのなら、なぜ車輪を再発明するのか...

そして最後に、さらに詳しく説明するために、私が実生活で作成したばかりの例をこの投稿の理由としました：

      <StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Log Count"  Width="100"/>
            <TextBlock Text="{Binding LastLogRun.LogMessageCount}"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Start Time" Width="100"/>
            <TextBlock Text="{Binding LastLogRun.StartTime}"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="End Time" Width="100"/>
            <TextBlock Text="{Binding LastLogRun.EndTime}"/>
        </StackPanel>
    </StackPanel>

Answer 1

3.5sp1を使用している場合、バインディングでStringFormatを使用できます。このような何かが動作するはずです...

<TextBlock Text="{Binding LastLogRun.LogMessageCount, StringFormat={}Log Count - {0}}" />

Answer 2

おそらく、UIを再考する必要があります。同じ行にLabel-Textboxが必要なのはなぜですか？それは恐ろしいスペースの無駄です。

texboxに over ラベルを付けないのはなぜですか？次に、シンプルなUI とシンプルなXAMLがあります：

<StackPanel Orientation="Vertical">
  <TextBlock>Name</TextBlock>
  <TextBox />
  <TextBlock>Age</TextBlock>
  <TextBox />
  <TextBlock>Mood</TextBlock>
  <TextBox />
</StackPanel>

TextBlocksにスタイリングを追加すると、非常にきれいなUIが得られ、繰り返しはほとんどありません。

Answer 3

共有サイズグループを使用して、2つのきれいに並んだ列の自動サイズ調整グリッドの動作を取得しながら、複雑さをユーザーコントロールに引き出すことができます。

探していることを行うLabeledEditコントロールの使用例を次に示します。複雑さはすべてUserControlに組み込まれているため、StackPanelでGrid.IsSharedSizeScopeを設定することを忘れないでください：

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication5"
        Name="Self" Title="Window1" Height="300" Width="300">
    <StackPanel Grid.IsSharedSizeScope="True">
        <local:LabeledEdit Label="Name"/>
        <local:LabeledEdit Label="Age" Text="28"/>
        <!-- and with databinding... -->
        <local:LabeledEdit Label="Width"
                           Text="{Binding Width, ElementName=Self}"/>
        <local:LabeledEdit Label="Height"
                           Text="{Binding Height, ElementName=Self}"/>
    </StackPanel>
</Window>

そして、これがUserControlのソースコードです。 LabeledEdit.xaml：

<UserControl x:Class="WpfApplication5.LabeledEdit"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Name="Self">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="LabeledEdit_Labels"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Content="{Binding Label, ElementName=Self}"/>
        <TextBox Grid.Column="1" Text="{Binding Text, ElementName=Self}"/>
    </Grid>
</UserControl>

LabeledEdit.xaml.cs：

using System.Windows;

namespace WpfApplication5
{
    public partial class LabeledEdit
    {
        public static readonly DependencyProperty LabelProperty =
            DependencyProperty.Register("Label", typeof(object), typeof(LabeledEdit));
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(LabeledEdit),
            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

        public LabeledEdit()
        {
            InitializeComponent();
        }

        public object Label
        {
            get { return GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
    }
}

Answer 4

silverlightツールキットには、非常にクールに動作するDataForm コントロール！