См. Изменения пользовательского интерфейса в режиме конструктора с WPF & XAML и привязкой данных?

Я просто смотрел это видео на XAML, где он создал часы, и заметил, что он действительно может видеть все изменения, которые он делает, с C Sharp в представлении дизайна Xaml.

В 33:30 он создает свой класс: https://youtu.be/Wb-l0e6WYE0?t=2008

В 37:10 он связывается с этим классом: https://youtu.be/Wb-l0e6WYE0?t=2227

Позже в 40:17 вы можете увидеть, что часы тикают в представлении дизайна!

Я попытался сделать это, создав класс с именем Ball с некоторыми свойствами, такими как size, и связал эти свойства с Canvas с прямоугольником, который имеет клип EllipseGeometry, который делает его круглым. Он отлично работает при запуске приложения, но вид дизайна просто белый.

Кто-нибудь знает, как он это делает?

Мой код:

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));
        }
    }
}
}

У меня также есть кнопка, которая увеличивает размер мяча!

Спасибо за помощь.

Источник

2 ответа

Решение

DataContext позволяет XAML найти экземпляр класса, к которому он должен быть привязан.

Затем привязки в XAML позволяют вам привязывать к определенным свойствам указанного класса.

Есть два отдельных DataContexts: design time а также run time,

Чтобы установить design time DataContext, см.:

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

По сути, когда вы устанавливаете время разработки DataContext, за кулисами среда выполнения WPF автоматически создает экземпляр нового экземпляра класса, на который вы указываете (или просто указывает на класс, если он статический), а затем дизайнер времени разработки Visual Studio будет отображать текущие значения из вашего класса, когда вы редактируете XAML. Это делает проектирование действительно быстрым, так как вы можете работать с живыми данными, и вам не нужно постоянно запускать программу, чтобы увидеть, как она выглядит.

Чтобы установить run time DataContext, см. ReSharper WPF error: "Не удается разрешить символ"MyVariable"из-за неизвестного DataContext". Ответ описывает, как использовать бесплатную утилиту Snoop для обнаружения ошибок привязки во время выполнения.

Источник

Добавил этот код:

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

И теперь я вижу свой зеленый шар во время разработки!

Спасибо!

Источник
Другие вопросы по тегам