grid内のコントロールを機能込みで複製したい

###前提・実現したいこと
現在「数値をtextbox二つに打ち込み、ボタンを押すことで上のtextboxの数値から下のtextboxの数値が引かれ、labelに引かれた後の数値が表示される」計算機のようなものを作成しており、grid内に作成したひとまとまりの計算機部分をウィンドウ下部のbuttonを押すことによって横並びに増やせるようにしたいです。
・現在実行時のイメージ画像

・目標とする状態

また、将来的にはこのタブを複製したいと考えており、
このサイトを基にUsercontrolでタブの中身を作っています。

###発生している問題
調べ方が悪いのか、grid内のコントロールをbuttonを押すイベントで複製する方法がわかりません。

###該当のソースコード

MainWindow.xaml.cs
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Text;
5using System.Threading.Tasks;
6using System.Windows;
7using System.Windows.Controls;
8using System.Windows.Data;
9using System.Windows.Documents;
10using System.Windows.Input;
11using System.Windows.Media;
12using System.Windows.Media.Imaging;
13using System.Windows.Navigation;
14using System.Windows.Shapes;
15
16namespace WpfApplication1
17{
18    /// <summary>
19    /// MainWindow.xaml の相互作用ロジック
20    /// </summary>
21    public partial class MainWindow : Window
22    {
23        public MainWindow()
24        {
25            InitializeComponent();
26        }
27        private void newtab_Click(object sender, RoutedEventArgs e)
28        {
29        }
30    }
31}

UserControl1.xaml.cs
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Text;
5using System.Threading.Tasks;
6using System.Windows;
7using System.Windows.Controls;
8using System.Windows.Data;
9using System.Windows.Documents;
10using System.Windows.Input;
11using System.Windows.Media;
12using System.Windows.Media.Imaging;
13using System.Windows.Navigation;
14using System.Windows.Shapes;
15using System.Text.RegularExpressions;
16
17namespace WpfApplication1
18{
19    /// <summary>
20    /// UserControl1.xaml の相互作用ロジック
21    /// </summary>
22    public partial class UserControl1 : UserControl
23    {
24        public UserControl1()
25        {
26            InitializeComponent();
27        }
28
29        int HP, damage;
30        Regex notIntReg = new Regex(@"[^0-9]");
31        private void text1_TextChanged(object sender, TextChangedEventArgs e)
32        {
33            text1.Text = notIntReg.Replace(text1.Text, "");
34            int.TryParse(text1.Text,out HP);
35        }
36
37        private void text2_TextChanged(object sender, TextChangedEventArgs e)
38        {
39            text2.Text = notIntReg.Replace(text2.Text, "");
40            int.TryParse(text2.Text, out damage);
41        }
42
43        private void Button_Click(object sender, RoutedEventArgs e)
44        {
45            HP = HP - damage;
46            NOWHP.Content = HP;
47        }
48    }
49}

###補足情報(言語/FW/ツール等のバージョンなど)
使用言語はC#で、WPFを使用しています。
VisualStudio Express 2013を使って作成しています。

読み取りづらい箇所等あるかもしれませんが何卒よろしくお願いいたします。

###変更1

UserControl1.xaml.cs
1namespace WpfApplication1
2{
3    /// <summary>
4    /// UserControl1.xaml の相互作用ロジック
5    /// </summary>
6    public partial class UserControl1 : UserControl
7    {
8        public UserControl1()
9        {
10            InitializeComponent();
11        }
12        //変数の移動
13        Regex notIntReg = new Regex(@"[^0-9]");
14        private void text1_TextChanged(object sender, TextChangedEventArgs e)
15        {
16            text1.Text = notIntReg.Replace(text1.Text, "");
17            //移動
18        }
19
20        private void text2_TextChanged(object sender, TextChangedEventArgs e)
21        {
22            text2.Text = notIntReg.Replace(text2.Text, ""); 
23            //移動
24        }
25
26        private void Button_Click(object sender, RoutedEventArgs e) //移動先
27        {
28            int damage;
29            int NHP = Convert.ToInt32(NOWHP.Content);
30            int.TryParse(text2.Text, out damage);
31            NHP = NHP - damage;
32            NOWHP.Content = NHP;
33        }
34    }
35}

行動規範の内容に同意します

回答2件

WPFの習作にぴったりな内容のため、今更ながら回答します。
短いながらいろいろなエッセンスが詰まっており、面白い内容になっているかと思います^^

xml:MainWindow.xaml
1<Window
2  x:Class="Q85594.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:local="clr-namespace:Q85594"
6  Width="800"
7  Height="450"
8  MinHeight="350">
9  <Window.DataContext>
10    <local:MainViewModel />
11  </Window.DataContext>
12
13  <Window.Resources>
14    <DataTemplate DataType="{x:Type local:TabViewModel}">
15      <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
16        <ItemsControl ItemsSource="{Binding Items}">
17          <ItemsControl.ItemsPanel>
18            <ItemsPanelTemplate>
19              <StackPanel Orientation="Horizontal" />
20            </ItemsPanelTemplate>
21          </ItemsControl.ItemsPanel>
22        </ItemsControl>
23      </ScrollViewer>
24    </DataTemplate>
25
26    <DataTemplate DataType="{x:Type local:ItemViewModel}">
27      <local:UserControl1 />
28    </DataTemplate>
29  </Window.Resources>
30
31  <DockPanel>
32    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal">
33      <Button
34        MinWidth="80"
35        Margin="8"
36        Command="{Binding AddTabCommand}"
37        Content="タブ追加" />
38      <Button
39        MinWidth="80"
40        Margin="8"
41        Command="{Binding Tabs/AddItemCommand}"
42        Content="計算追加" />
43    </StackPanel>
44
45    <TabControl
46      Margin="8"
47      DisplayMemberPath="Header"
48      IsSynchronizedWithCurrentItem="True"
49      ItemsSource="{Binding Tabs}" />
50  </DockPanel>
51</Window>

xml:UserControl1.xaml
1<UserControl
2  x:Class="Q85594.UserControl1"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  MinWidth="200"
6  MinHeight="200">
7  <Border Margin="8" Padding="8" Background="#EEE">
8    <UniformGrid Columns="1">
9      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Hp}" />
10      <TextBox
11        x:Name="hpTextBox"
12        VerticalAlignment="Center"
13        HorizontalContentAlignment="Right"
14        Text="{Binding Hp, UpdateSourceTrigger=PropertyChanged}" />
15      <TextBox
16        x:Name="damageTextBox"
17        VerticalAlignment="Center"
18        HorizontalContentAlignment="Right"
19        Text="{Binding Damage, UpdateSourceTrigger=PropertyChanged}" />
20      <Button
21        MinWidth="80"
22        HorizontalAlignment="Center"
23        VerticalAlignment="Center"
24        Command="{Binding AttackCommand}"
25        Content="攻撃">
26        <Button.Style>
27          <Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
28            <Setter Property="IsEnabled" Value="False" />
29            <Style.Triggers>
30              <MultiDataTrigger>
31                <MultiDataTrigger.Conditions>
32                  <Condition Binding="{Binding (Validation.HasError), ElementName=hpTextBox}" Value="False" />
33                  <Condition Binding="{Binding (Validation.HasError), ElementName=damageTextBox}" Value="False" />
34                </MultiDataTrigger.Conditions>
35                <Setter Property="IsEnabled" Value="True" />
36              </MultiDataTrigger>
37            </Style.Triggers>
38          </Style>
39        </Button.Style>
40      </Button>
41    </UniformGrid>
42  </Border>
43</UserControl>

cs:ViewModel.cs
1using System.Collections.ObjectModel;
2using CommunityToolkit.Mvvm.ComponentModel;
3using CommunityToolkit.Mvvm.Input;
4
5namespace Q85594;
6
7partial class MainViewModel
8{
9    public ObservableCollection<TabViewModel> Tabs { get; } = [new("test")];
10    [RelayCommand] private void AddTab() => Tabs.Add(new($"Tab{Tabs.Count}"));
11}
12
13partial class TabViewModel(string header)
14{
15    public string Header { get; } = header;
16    public ObservableCollection<ItemViewModel> Items { get; } = [new()];
17    [RelayCommand] private void AddItem() => Items.Add(new());
18}
19
20partial class ItemViewModel : ObservableObject
21{
22    [ObservableProperty] private int hp = 100;
23    public int Damage { get; set; } = 10;
24    [RelayCommand] private void Attack() => Hp -= Damage;
25}

NuGet Gallery | CommunityToolkit.Mvvm
MVVM Toolkit の概要 - Community Toolkits for .NET | Microsoft Learn

投稿2024/11/20 16:16

TN8001

総合スコア10112

ItemsControlを使うと良いと思います。

Xamlで繰り返し要素を記述する
 Standard Controls - ItemsControl

そのためにはまずUserControl1 で int HP, damageなどは保持せず、おのおののUserControl1に対応したViewModelを保持するようにして下さい。

投稿2017/07/25 03:27

ebiryo

総合スコア797

willow

2017/07/28 17:59

回答ありがとうございます。返信が遅れて申し訳ありません。 Gridを増やす部分に関してはなんとなくわかったのですが、ViewModelに関しての知識が足りず、どういった状態を指すのかさえ手探り状態です。試しに数値を変数で維持するのではないものを書いてみましたが、これは保持した状態にはならないでしょうか…。返信が遅れた上にお手を煩わせるようなことをしてしまい申し訳ありません。

行動規範の内容に同意します

あなたの回答