別のxamlファイルにBindingしたい

Question

WPFに関して、別のxamlファイルにBindingしたいです。

現在、

Left.xaml ↓

    .
    .
<StackPanel Name="Width">
  <Button Command="{Binding Command}"/>
  <StackPanel  Width="{Binding LeftWidth}">
    .
    .
  </StackPanel>
</StackPanel>
    .
    .

**Left.xaml.cs **↓

    .
public partical class Left
{
    .
    .
  Width.DataContext = new ViewModel(){LeftWidth = 100, RightWidth= 100};
    .
    .
}

class ViewModel : INotifyPropertyChanged
{
    .
    .
}

class Command : ICommand
{
    .
    .
}

のような形でLeft.xamlのボタンを押すとwidthのサイズが変わるところまでできたのですが、

以下のAll.xamlファイルの中で、Left.xaml(上記)のボタンを押した場合に、Left.xamlのwidthだけでなくRight側のwidthも変更したいのですが、うまくできません。

All.xaml↓

    .
    .
<StackPanel>
  <userControls: Left/>
</StackPanel>
<StackPanel>
  <userControls:Right  Width="{Binding RightWidth}"/>
</StackPanel>
    .
    .

Left.xamlの中のボタンを押してRight.xaml側にも値を渡すにはどのようにすれば良いでしょうか。

Comments

[TN8001]

長いのを省略するのは仕方ないですが、
class ViewModel() { }
こんな書き方はできないし、ちょっと雑すぎませんか。

class Leftで Width.DataContext = new ViewModel() とするのは変更できないんですかね？

AllのDataContext（ViewModel）自体かそのプロパティのひとつに設定すれば、そのまま引き継がれるのですが。

[Uatk_]

ご指摘ありがとうございます。

class Leftで Width.DataContext = new ViewModel() とするのを変更し、AllのDataContextの方で設定することで解決しました。

全体的に私の理解が乏しかったため、勉強し直します。ありがとうございました。

[TN8001]

> ご指摘ありがとうございます。

きつめの言葉に感じていたとしたらお詫びします。
今後も萎縮せずお気軽にご利用ください^^

Answer 1

horaihoraiさんのほうではすでに解決されていますが、第三者視点ではわかりにくいところもあるのでまとめさせていただきます。

<UserControl
  x:Class="Questions348249.Left"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Name="Width">
    <Button Command="{Binding Command}" Content="Button" />
    <StackPanel Width="{Binding LeftWidth}">
      <Rectangle Height="30" Fill="Red" />
    </StackPanel>
  </StackPanel>
</UserControl>

<UserControl
  x:Class="Questions348249.Right"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Name="Width">
    <Button Command="{Binding LeftRight.Command}" Content="Button" />
    <StackPanel Width="{Binding LeftRight.RightWidth}">
      <Rectangle Height="30" Fill="Blue" />
    </StackPanel>
  </StackPanel>
</UserControl>

<Window
  x:Class="Questions348249.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:userControls="clr-namespace:Questions348249"
  Width="800"
  Height="450">
  <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">

    <!--  こうしてもいいし  -->
    <userControls:Left DataContext="{Binding LeftRight}" />

    <!--  こうするならRightで Width="{Binding LeftRight.RightWidth}" となる  -->
    <userControls:Right />
  </StackPanel>
</Window>

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Windows;
using System.Windows.Input;

namespace Questions348249
{
    class LeftRightViewModel : ObservableObject
    {
        public double LeftWidth { get => leftWidth; set => SetProperty(ref leftWidth, value); }
        private double leftWidth;
        public double RightWidth { get => rightWidth; set => SetProperty(ref rightWidth, value); }
        private double rightWidth;
        public ICommand Command { get; }

        public LeftRightViewModel()
        {
            Command = new RelayCommand(() =>
            {
                LeftWidth += 10;
                RightWidth += 5;
            });
        }
    }

    class MainViewModel
    {
        public LeftRightViewModel LeftRight { get; }
            = new LeftRightViewModel { LeftWidth = 100, RightWidth = 100, };
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 「AllのDataContext（ViewModel）自体」 に設定した場合
            //DataContext = new LeftRightViewModel();

            // 「そのプロパティのひとつに設定」 した場合
            DataContext = new MainViewModel(); 
        }
    }
}

INotifyPropertyChanged・ICommand実装は↓を使用。
NuGet Gallery | CommunityToolkit.Mvvm 7.0.3

Introduction to the MVVM Toolkit - Windows Community Toolkit | Microsoft Docs