3

XAML でこのビデオを見ていて、彼が時計を作成していて、Xaml デザイン ビューで C Sharp から行っているすべての変更を実際に確認できることに気付きました。

33:30 にクラスを作成します: https://youtu.be/Wb-l0e6WYE0?t=2008

37:10 に、彼はそのクラスにバインドします: https://youtu.be/Wb-l0e6WYE0?t=2227

その後の 40:17 で、実際に時計が刻々と過ぎているのをデザイン ビューで見ることができます。

サイズなどのいくつかのプロパティを持つ Ball というクラスを作成し、それらのプロパティを、それを丸くする EllipseGeometry クリップを持つ長方形を持つ Canvas にバインドすることで、これを実行しようとしました。アプリケーションの実行時には問題なく動作しますが、デザイン ビューはただ白いだけです。

彼がこれをどのように行うか知っている人はいますか？

私のコード:

MainWindow.xaml

<Window x:Class="XamlTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:XamlTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Canvas Background="White">
        <Rectangle Height="{Binding Size}" Width="{Binding Size}" Fill="Green" Canvas.Top="40">
            <Rectangle.Clip>
                <EllipseGeometry Center="{Binding EllipseCenter}" RadiusX="{Binding EllipseRadius}" RadiusY="{Binding EllipseRadius}"/>
            </Rectangle.Clip>
        </Rectangle>
    <Button x:Name="button" Content="Button" Width="75" Click="button_Click"/>
</Canvas>

コードビハインド:

using System.Windows;
namespace XamlTest
{
public partial class MainWindow : Window
{
    Ball TheBall = new Ball();
    public MainWindow()
    {
        InitializeComponent();
        TheBall.Size = 300;
        this.DataContext = TheBall;
    }


    private void button_Click(object sender, RoutedEventArgs e)
    {

        TheBall.Size = TheBall.Size + 40;
    }
}
}

ボールクラス:

using System.Windows;
namespace XamlTest
{
class Ball : INotifyPropertyChangedBase
{
    public Ball()
    {
        Size = 50;
    }
    private double _size;
    public double Size
    {
        get
        {
            return _size;
        }
        set
        {
            _size = value;
            EllipseCenter = new Point(_size / 2, _size / 2);
            EllipseRadius = _size / 2;
            OnPropertyChanged("Size");
        }
    }

    private Point _ellipseCenter;
    public Point EllipseCenter
    {
        get
        {
            return _ellipseCenter;
        }
        set
        {

            _ellipseCenter = value;
            OnPropertyChanged("EllipseCenter");
        }
    }

    private double _ellipseRadius;
    public double EllipseRadius
    {
        get {
            return _ellipseRadius;
        }
        set {
            _ellipseRadius = value;
            OnPropertyChanged("EllipseRadius");
        }
    }


}
}

INotifyPropertyChangedBase クラス:

using System.ComponentModel;
namespace XamlTest
{

public class INotifyPropertyChangedBase : INotifyPropertyChanged
{


    public event PropertyChangedEventHandler PropertyChanged;

    internal void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;

        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
}

ボールのサイズを大きくするボタンもあります!

助けてくれてありがとう。

4

2 に答える 2

3

これDataContextにより、XAML は、バインド先のクラスのインスタンスを見つけることができます。

次に、XAML のバインディングを使用して、そのクラスの特定のプロパティにバインドできます。

と の 2 つの別個の DataContext がありdesign timeますrun time。

design timeDataContextを設定するには、以下を参照してください。

http://adamprescott.net/2012/09/12/design-time-data-binding-in-wpf/

基本的に、デザイン時の DataContext を設定すると、バックグラウンドで WPF ランタイムが、指定したクラスの新しいインスタンスを自動的にインスタンス化します (または、静的な場合は単にクラスをポイントします)。次に、Visual Studio のデザイン時のデザイナーがXAML を編集しているときに、クラスからのライブ値を表示します。これにより、ライブデータを操作できるため、設計が非常に高速になり、プログラムを常に実行してどのように見えるかを確認する必要がなくなります.

run timeDataContextを設定するには、 ReSharper WPF エラー: 「不明な DataContext のため、シンボル "MyVariable" を解決できません」 を参照してください。回答では、無​​料の Snoop ユーティリティを使用してランタイム バインディング エラーを検出する方法について説明しています。

于 2015-05-29T22:05:23.207 に答える
1

このコードを追加しました：

d:DataContext="{d:DesignInstance  local:Ball,IsDesignTimeCreatable=True}"

これで、設計時に緑色のボールが表示されるようになりました!

ありがとう！

于 2015-05-29T22:46:54.290 に答える