2

私はこれにすべて間違ってアプローチしている可能性があるので、別の提案があれば教えてください。

キャラクターの統計など、ユーザーに表示される一連のテキストブロックを持つWindowsRT用のアプリを作成しています。ユーザーには次の情報が表示されます。

Str：10
短所：10
Dex：10

等々。

これらを入力して、結果に基づいて選択したビュー値を計算できるようにしたいと思います。

私は、上部の[編集]ボタンをクリックして、編集可能な各テキストブロック上でいくつかのテキストボックスを切り替えることでした。

「BlendforVisualStudio」を使用してこれを設定しようとすると、49x34よりも小さい（テキストブロックよりもはるかに大きい）テキストボックスを作成できないようです。

ボタンクリックで各テキストブロックのテキストボックスを（その寸法を使用して）生成する方法を見つけるつもりでしたが、それらは常に同じであり、それらがたくさんあるので、ブレンドを介して静的にしようとしていました。

私はXAMLにかなり慣れていないので、このような編集可能なフィールドを設定する人々の良い例を見つけることができないようです。それで、静的フィールドの束に編集可能なテキストボックスを持たせるにはどうすればよいですか？

4

5 に答える 5

5

「IsReadOnly」プロパティが true かどうかによって変わる、TextBox のスタイルを使用したい場合があります。

IsReadOnly が true の場合、BorderBrush と Background を透明に設定して、通常のテキストブロックのように見せることができます。

このように、TextBlocks と TextBoxes を重ねる必要はありません。TextBox コントロールを単独で使用し、[編集] ボタンをクリックしたときに "IsReadOnly" プロパティを切り替えます。

あなたのリソースで：

<Style x:Key="MyEditableField" TargetType={x:Type TextBox}>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
        </DataTrigger>
    </Style.Triggers>
</Style>

編集可能なフィールドの 1 つを次に示します。

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Str: " />
    <TextBox Style="{StaticResource MyEditableField}"
             Text="{Binding Strength}"
             IsReadOnly="{Binding IsEditingDisabled}" />
</StackPanel>
于 2012-12-24T02:25:13.987 に答える
4

遅い答えですが、カスタムの編集可能なテキストボックスを作成することもできます。実際にはコードは非常に簡単です(明らかに、自分のニーズに合わせて変更できます)

 public class EditableTextBox : TextBox
{
    public EditableTextBox()
    {
        this.BorderBrush = new SolidColorBrush(Colors.Black);
    }
    protected override void OnTapped(TappedRoutedEventArgs e)
    {
        this.IsReadOnly = false;
        SetEditingStyle();
        base.OnTapped(e);
    }

    protected override void OnDoubleTapped(DoubleTappedRoutedEventArgs e)
    {
        this.IsReadOnly = false;
        SetEditingStyle();
        base.OnDoubleTapped(e);
    }

    protected override void OnLostFocus(RoutedEventArgs e)
    {
        this.IsReadOnly = true;
        SetReadonlyStyle();
        base.OnLostFocus(e);
    }

    public void SetReadonlyStyle()
    {
        this.BorderBrush.Opacity = 0;
        this.Background.Opacity = 0;
    }

    public void SetEditingStyle()
    {
        this.BorderBrush.Opacity = 1;
        this.Background.Opacity = 1;
    }
}

サンプル：

ここに画像の説明を入力

ここに画像の説明を入力

チュートリアル:完全なチュートリアルの URL

于 2015-03-21T17:48:50.387 に答える
1

プロパティを使用してビューとビューモデルの間で編集モードを切り替えることは、悪い設計アプローチです。ビューとビューモデルの間でこのような状態の変化を伝えるには、イベントとコマンド バインディングを使用する必要があります。

これは、MVVM に準拠した方法で原則を説明する記事です: http://www.codeproject.com/Articles/802385/A-WPF-MVVM-In-Place-Edit-TextBox-Control

見て、あなたの考えを教えてください。

于 2014-07-30T22:08:59.430 に答える
0

これは BTownTKD のソリューションから構築されていますが、私は可能な限りソリューションの WPF を好むので、ここでは少し変更を加えています。私の場合は、タブ コントロールの名前を変更しようとしています。

私のビューモデルには次のコードがあります:

    private bool _isEditingName = false;

    public bool IsEditingName
    {
        get
        {
            return _isEditingName;
        }
        set
        {
            _isEditingName = value;
            OnPropertyChanged();
        }
    }

    public ICommand StartEditing
    {
        get
        {
            return new DelegateCommand(() =>
            {
                IsEditingName = true;
            });
        }
    }

    public ICommand EndEditing
    {
        get
        {
            return new DelegateCommand(() =>
            {
                IsEditingName = false;
            });
        }
    }

次は、タブのデータ テンプレートを含むビューです (タブだけのコンテンツではありません)。

<TabControl ItemsSource="{Binding Items}" SelectedItem="{Binding ActiveItem}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Center">
                <TextBlock x:Name="TabName" Text="{Binding Name}" Visibility="{Binding IsEditingName, Converter={StaticResource InvertedBoolToVisConverter}}" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left">
                    <TextBlock.InputBindings>
                        <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding StartEditing}" />
                    </TextBlock.InputBindings>
                </TextBlock>
                <TextBox Text="{Binding Name}" Visibility="{Binding IsEditingName, Converter={StaticResource BoolToVisConverter}}" VerticalAlignment="Center" HorizontalContentAlignment="Stretch" TextAlignment="Left" IsVisibleChanged="TextBox_IsVisibleChanged">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LostFocus">
                            <i:InvokeCommandAction Command="{Binding EndEditing}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <TextBox.InputBindings>
                        <KeyBinding  Key="Enter" Command="{Binding EndEditing}" />
                    </TextBox.InputBindings>
                </TextBox>
            </Grid>                 
        </DataTemplate>
    </TabControl.ItemTemplate>  
</TabControl>

そして最後になりましたが、ダブルクリックして編集モードにし、テキストボックスにオートフォーカスしてすべてのコンテンツを選択してすぐに入力できるようにしたかったのです。どの xaml ソリューションも単純なコード ビハインドほどクリーンではなかったため、最終的に可視性変更ハンドラーのテキスト ボックスにこれを追加することにしました。

    private void TextBox_IsVisibleChanged(object sender, System.Windows.DependencyPropertyChangedEventArgs e)
    {
        var box = sender as TextBox;
        if (box != null)
        {
            if ((bool)e.NewValue)
            {
                box.Focus();
                box.SelectAll();
            }
        }
    }

私が見つけたすべての解決策の中で、これは私のお気に入りでした。皆さん、投稿ありがとうございます!! 私の問題に対する本当に良い全体的な解決策を見つけるのに役立ちました!

于 2017-07-05T20:40:42.600 に答える