C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[2]: C# WPF Canvas のプロパティバインディング


(過去ログ 114 を表示中)

[トピック内 3 記事 (1 - 3 表示)]  << 0 >>

■67184 / inTopicNo.1)  C# WPF Canvas のプロパティバインディング
  
□投稿者/ FabbricaKM (1回)-(2013/07/12(Fri) 15:55:40)
FabbricaKM さんの Web サイト

分類:[C#] 

CanvasとCanvasに表示するImageコントロールのプロパティバインディングが出来なくて困っています。
下記のコードを書きました。

1. MainWindow.xaml
<Window x:Class="KM_PictureViewer.SlideShow.MainWindow"
        -- 省略 --
        Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:KM_PictureViewer.SlideShow.View" WindowStartupLocation="CenterOwner" Initialized="Window_Initialized" Closed="Window_Closed">

    <Canvas Name="canvas1" Background="{Binding Background}" >
    </Canvas>
</Window>

2. MainWindowのコードビハインドであるMainWindow.xaml.cs
namespace KM_PictureViewer.SlideShow {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel(this.canvas1);
        }
    }
}

3. MainWindowのビューモデルであるMainWindowViewModel.cs
namespace KM_PictureViewer.SlideShow {
    public class MainWindowViewModel : ViewModelAbstract {
        private string background = "cyan";
        public string Background {
            get { return this.background; }
            set {
                this.background = value;
                base.RaisePropertyChanged("Background");
            }
        }

        public MainWindowViewModel(System.Windows.Controls.Canvas canvas) {
            this.Initialize();
            
            PictureViewModel pictureViewModel01 = new PictureViewModel();

            PictureView pictureView01 = new PictureView();
            pictureView01.DataContext = pictureViewModel01;
            
            canvas.Children.Add(pictureView01);
        }
    }
}

4. MainWindowに表示するPictureView.xaml
<UserControl x:Class="KM_PictureViewer.SlideShow.View.PictureView"
        -- 省略 --
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
    
    <Border BorderBrush="White" BorderThickness="{Binding BorderThickness}" Canvas.Top="{Binding CanvasTop}" Canvas.Left="{Binding CanvasLeft}"  >
        <Image Source="{Binding ImagePath}" >
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation  Storyboard.TargetProperty="Opacity" From="{Binding FromValue}" To="{Binding ToValue}" RepeatBehavior="{Binding FillBehavior}" AutoReverse="{Binding AutoReverse}" Duration="{Binding Duration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Border>
</UserControl>

5. PictureView.xaml.cs
namespace KM_PictureViewer.SlideShow.View {

    /// <summary>
    /// PictureView.xaml の相互作用ロジック
    /// </summary>
    public partial class PictureView : UserControl {
        public PictureView() {
            InitializeComponent();
        }
    }
}

6. PictureViewのビューモデルであるPictureViewModel
namespace KM_PictureViewer.SlideShow.ViewModel {
    public class PictureViewModel : PictureViewModelAbstract {
        private double? fromVale = 0.1;
        public double? FromVale {
            get { return this.fromVale; }
            set {
                this.fromVale = value;
                base.RaisePropertyChanged("FromVale");
            }
        }

        private double? toValue = 1;
        public double? ToVale {
            get { return this.toValue; }
            set {
                this.toValue = value;
                base.RaisePropertyChanged("ToVale");
            }
        }

        private FillBehavior fillBehavior = FillBehavior.Stop;
        public FillBehavior FillBehavior {
            get { return this.fillBehavior; }
            set {
                fillBehavior = value;
                base.RaisePropertyChanged("FillBehavior");
            }
        }

        public bool autoReverse = true;
        public bool AutoReverse {
            get { return this.autoReverse; }
            set {
                this.autoReverse = value;
                base.RaisePropertyChanged("AutoReverse");
            }
        }

        private Duration duration = new Duration(new TimeSpan(0, 0, 10));
        public Duration Duration {
            get { return this.duration; }
            set {
                this.duration = value;
                base.RaisePropertyChanged("Duration");
            }
        }

        private double canvasTop = 100;
        public double CanvasTop {
            get { return this.canvasTop; }
            set {
                this.canvasTop = value;
                base.RaisePropertyChanged("CanvasTop");
            }
        }

        private double canvasLeft = 100;
        public double CanvasLeft {
            get { return this.canvasLeft; }
            set {
                this.canvasLeft = value;
                base.RaisePropertyChanged("CanvasLeft");
            }
        }

        /// <summary>
        /// 
        /// </summary>
        public PictureViewModel() {
            
        }
    }
}

7. PictureViewModelクラスの基底クラスであるPictureViewModelAbstract.cs
namespace KM_PictureViewer.SlideShow.ViewModel {
    public abstract class PictureViewModelAbstract : ViewModelAbstract {
        private int borderThickness = 5;
        public int BorderThickness {
            get { return this.borderThickness; }
            set {
                this.borderThickness = value;
                base.RaisePropertyChanged("BorderThickness");
            }
        }

        private string imagePath = @"C:\Users\Public\Pictures\Sample Pictures\アンテロープ.jpg";
        public string ImagePath {
            get { return this.imagePath; }
            set {
                this.imagePath = value;
                base.RaisePropertyChanged("ImagePath");
            }
        }

    }
}


8. PictureViewModelAbstractクラスの基底クラスであるViewModelAbstract.cs
namespace KM_PictureViewer.Common.ViewModel {
    public abstract class ViewModelAbstract : INotifyPropertyChanged    //, INotifyCollectionChanged
    {
        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        /// <summary>
        /// PropertyChangedイベントの発行
        /// </summary>
        /// <param name="propertyName"></param>
        protected void RaisePropertyChanged(String propertyName) {
            PropertyChangedEventHandler eventHandler = this.PropertyChanged;
            if (eventHandler != null) {
                eventHandler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

と言うコードを書いたのですが、6.のPictureView.xamlでのバインディグプロパティが反映されません。
BorderThicknessプロパティとSourceプロパティは反映されるのですが、以下のプロパティが反映されません。

Canvas.Top
Canvas.Left
この2つは、Canvas.Top="100"などと値を直書きしても反映されません。

From
To
RepeatBehavior
AutoReverse
Duration
この5つは、From="0.1" To="0.1"などと値を直書きすると反映されます。

この違いは何故でしょうか?。プロパティをバインドするために必要なコードが抜けているでしょうか?
ご教示下さい。

引用返信 編集キー/
■67186 / inTopicNo.2)  Re[1]: C# WPF Canvas のプロパティバインディング
□投稿者/ Hongliang (66回)-(2013/07/12(Fri) 16:13:13)
Canvas(に限らずPanel全般)はレイアウト用の添付プロパティを提供しますが、
その添付プロパティを参照するのはあくまでChidrenに含まれている物だけです。
Window - Canvas - PictureView - Border
というツリー構成になっていて、BorderのCanvas.Top添付プロパティを設定しても、
CanvasはChildrenに含まれていないBorderの値は参照しません。

// そうじゃないとCanvas - Canvas - Borderって構成の時にBorderにCanvas.Topを設定すると
// 一体どっちのCanvasにおけるCanvas.Topだ?ってことになってしまいます。

引用返信 編集キー/
■67189 / inTopicNo.3)  Re[2]: C# WPF Canvas のプロパティバインディング
□投稿者/ FabbricaKM (2回)-(2013/07/12(Fri) 18:32:05)
FabbricaKM さんの Web サイト
No67186 (Hongliang さん) に返信
> Canvas(に限らずPanel全般)はレイアウト用の添付プロパティを提供しますが、
> その添付プロパティを参照するのはあくまでChidrenに含まれている物だけです。
> Window - Canvas - PictureView - Border
> というツリー構成になっていて、BorderのCanvas.Top添付プロパティを設定しても、
> CanvasはChildrenに含まれていないBorderの値は参照しません。
>
> // そうじゃないとCanvas - Canvas - Borderって構成の時にBorderにCanvas.Topを設定すると
> // 一体どっちのCanvasにおけるCanvas.Topだ?ってことになってしまいます。

Hongliang 様

早速の回答ありがとうございます。

お蔭様で、BorderのCanvas.Top添付プロパティの件、理解出来ました。

また、Fromプロパティが反映されないのは、6.のPictureViewModelクラスのスペルミスが原因でした。
誤)FromVale
正)FromValue

ありがとうございました。

FabbricaKM
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -