Как связать данные с собственным пользовательским контроллером? - PullRequest
Новая
       8

Как связать данные с собственным пользовательским контроллером?

0 голосов
/ 06 ноября 2018

Я не могу понять, как сделать свой собственный контроль. Например, я хочу сделать приложение, похожее на блог-сайт, но написанное для рабочего стола на WPF, привязанное к MVVM.

В одном окне я пишу статью, и эта статья должна отображаться на главной странице в виде предварительного просмотра, и при нажатии на нее ее нужно открыть на другой странице.

Как сделать эту превью-модель и как связать их друг с другом?

Модель: 

class Article : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string _ArticleTitle, _ArticleContent;
    private Author _ArticleAuthor;
    private LanguageCategories _LanguageCategory;

    #region Property Getters and Setters
    public string ArticleTitle
    {
        get { return _ArticleTitle; }
        set
        {
            _ArticleTitle = value;
            OnPropertyChanged("Title");
        }
    }

    public Author ArticleAuthor
    {
        get { return this._ArticleAuthor; }
    }

    public LanguageCategories LanguageCategory {
        get { return _LanguageCategory; }
        set {
            _LanguageCategory = value;
            OnPropertyChanged("Category");
        }
    }

    public string ArticleContent
    {
        get { return _ArticleContent; }
        set
        {
            _ArticleContent = value;
            OnPropertyChanged("Content");
        }
    }
    #endregion

    private void OnPropertyChanged(string proptertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(proptertyName));
        }
    }


    public Article(string _ArticleTitle, LanguageCategories _LanguageCategory, string _ArticleContent)
    {
        this._ArticleTitle       = _ArticleTitle;
        this._LanguageCategory   = _LanguageCategory;
        this._ArticleContent     = _ArticleContent;
    }

    public Article() { }
}

public enum LanguageCategories {
    Ruby,
    Perl
}

Окно создания статьи: 

<StackPanel>
    <StackPanel Height="50" Background="{StaticResource HamburgeButton}" VerticalAlignment="Top">
        <Button Style="{StaticResource Xbutton}" Width="50" Height="50" HorizontalAlignment="Right" Click="Button_Click">X</Button>
    </StackPanel>

    <Label Style="{StaticResource SwitchLabel}" Foreground="{StaticResource MusicBar}" FontSize="40" HorizontalAlignment="Center" Margin="0, 25, 0, 0">NEW ARTICLE</Label>

    <StackPanel Orientation="Horizontal" Margin="50, 30, 100, 0">
        <Label Style="{StaticResource SwitchLabel}" Foreground="{StaticResource Separotor}" FontSize="20">Title:</Label>
        <TextBox  Name="TitleText" Width="500" Margin="85,0,0,0"
                  Text="{Binding Path = ArticleTitle, UpdateSourceTrigger=PropertyChanged}"></TextBox>
    </StackPanel>

    <StackPanel Orientation="Horizontal" Margin="50, 20, 100, 0">
        <Label Style="{StaticResource SwitchLabel}" Foreground="{StaticResource Separotor}" FontSize="20">Category:</Label>
        <ComboBox Style="{StaticResource {x:Type ComboBox}}" SelectedValue="{Binding Path=Category}" Width="200" Margin="50, 0, 0, 0">
            <model:LanguageCategories>Ruby</model:LanguageCategories>
            <model:LanguageCategories>Perl</model:LanguageCategories>
        </ComboBox>
    </StackPanel>
 </StackPanel>

Как связать эти две части (Новая статья + превью): 

<Grid Background="{StaticResource MusicBar}" Margin="0,0,20,20">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource Xbutton}" Width="30" FontFamily="{StaticResource SwitchFont}" FontSize="20">></Button>
        </StackPanel>

        <StackPanel Orientation="Vertical" VerticalAlignment="Top">
            <StackPanel Orientation="Horizontal">
                <Label FontFamily="{StaticResource SwitchFont}" VerticalAlignment="Center"  Foreground="White" FontSize="25" Margin="10, 0, 0, 0">Classes and Objects</Label>
                <Label FontFamily="{StaticResource SwitchFont}"  VerticalAlignment="Center" Foreground="{StaticResource HamburgeButton}" FontSize="15" Margin="215, 0, 0, 0">RUBY</Label>
            </StackPanel>
            <Separator Background="{StaticResource HamburgeButton}" Height="3" Width="450" HorizontalAlignment="Left" Margin="25, 0, 0, -10"></Separator>
            <TextBlock Height="130" Width="450" HorizontalAlignment="Left" TextWrapping="Wrap"  Margin="20, 15, 0, 0">asdasdadasdasdassdasdasdasdaasd</TextBlock>
        </StackPanel>
    </Grid>
...