Как использовать несколько пользовательских элементов управления на одной странице xaml? - PullRequest
0 голосов
/ 09 мая 2019

Я создаю приложение для образовательных целей.Как я могу использовать несколько пользовательских элементов управления в моем «MainWindow.xaml»?

Я хочу использовать пользовательские элементы управления в моем MainWindow, чтобы мне не понадобилось несколько окон.Поэтому после нажатия кнопки «Далее» на макете регистрации

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

Я прочитал столько разных «решений», сколько смог, без особой удачи ..

Вот код, который я имею в атм.

Main Window.xaml

<Window x:Class="WpfApp1.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:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="700" Width="700"
    WindowStartupLocation="CenterScreen">

<Grid>
    <!--Background image-->
    <Grid.Background >
        <ImageBrush ImageSource="login-page-background-3.jpg"/>
    </Grid.Background>

    <!--Main content scroll-->
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <local:SignUpControl>

        </local:SignUpControl>
    </ScrollViewer>
</Grid>

MainWindow.xaml.cs не имеет кода ...

SignUpControl.Xaml

<UserControl x:Class="WpfApp1.SignUpControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfApp1"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<StackPanel
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            TextBlock.TextAlignment="Center">

    <!--Login main content white box-->
    <Border Background="WhiteSmoke" 
                    Opacity="0.4"
                    CornerRadius="30"
                    Padding="15 50 15 15"
                    Width="350" 
                    Margin="50 50 50 0">

        <StackPanel>

            <!--Sign Up header-->
            <TextBlock FontSize="20" 
                           HorizontalAlignment="Center" 
                           VerticalAlignment="Top" 
                           Height="auto" 
                           FontFamily="Goudy Stout" >Sign Up</TextBlock>

            <!--Sign up subtext-->
            <TextBlock FontSize="14" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Top"
                               Height="auto" 
                               FontFamily="Ravie" >It's about to get fun!</TextBlock>

            <!--Inner grid for Username & Password-->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <!--Textbox for username-->
                <TextBox Grid.Row="0" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="UsernameBox" Margin="5"/>
                <TextBlock IsHitTestVisible="False" Text="Username" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Text, ElementName=UsernameBox}" Value="">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>

                <!--PasswordBox-->
                <TextBox Grid.Row="1" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="passwordBox" Margin="5"/>
                <TextBlock Grid.Row="1" IsHitTestVisible="False" Text="password" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Text, ElementName=passwordBox}" Value="">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>

            </Grid>

            <!--Next Button-->
            <Button Content="Next" 
                            HorizontalAlignment="Center" 
                            FontWeight="Bold"
                            FontSize="14"
                            BorderThickness="0"
                            FontFamily="Goudy Stout"
                            Background="Transparent"
                            Padding="20 10"
                            Margin="0 10"
                            x:Name="NextButton"
                            Click="NextButton_Click"/>

        </StackPanel>

    </Border>

    <!--Border for PreRegistered account-->
    <Border Background="WhiteSmoke" 
                    Opacity="0.4"
                    CornerRadius="50"
                    Padding="0"
                    Width="400" 
                    Height="auto"
                    Margin="0 12.5 0 0">

        <!--Already registered button-->
        <Button Content="I already have an account"  
                    HorizontalAlignment="Center" 
                    Opacity="0.8"
                    FontSize="13"
                    BorderThickness="0" 
                    FontFamily="Goudy Stout" 
                    Background="Transparent"
                    Foreground="Black"
                    x:Name="alreadyRegBtn"
                    Padding="0 10"
                    Margin="0 5 0 5"/>

    </Border>

</StackPanel>

Как мне сделать это решение, где я могу изменитьмежду пользовательскими элементами управления в том же окне, Ofcourse после экрана благодарности, я буду использовать ту же логику, чтобы перейти к «Войти!»и так далее ...

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Когда я не использую Prism или Dependency Injection, я обычно использую первый подход View Model.

В этом сценарии у нас есть свойство в нашей Windows ViewModel, которое является классом, от которого наследуются другие UserControls ViewModels, обычно просто используется класс ViewModelBase, который имеет имплиментацию INotifyPropertyChanged:

private ViewModelBase currentViewModel;
public ViewModelBase CurrentViewModel
{
    get { return currentViewModel; }
    set { currentViewModel = value; NotifyPropertyChanged(); }
}

Теперь внутри вашего MainWindow, как @Tomtom сказал, что у вас ContentControl привязано к этому свойству. Это означает, что при использовании DataTemplates у вас может быть другое отображение View в зависимости от того, какой тип ViewModel в данный момент находится в этом свойстве.

<Window.Resources>
    <DataTemplate DataType="{x:Type viewmodels:ViewModel1}">
        <views:View1/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewmodels:ViewModel2}">
        <views:View2/>
    </DataTemplate>
</Window.Resources>

<ContentControl Content="{Binding CurrentViewModel}"/>

С этим на месте все, что вам нужно сделать, это иметь некоторую логику, которая изменяет ViewModel на MainWindow ViewModel, и View обновится, чтобы отобразить правильный View для этой ViewModel.

Редактировать: Следует отметить, что существует множество различных способов, которыми люди используют для достижения того, что вы хотите, ни один из них не является действительно правильным или неправильным, но все они соответствуют потребностям разных людей и стилям кодирования. Diagram

0 голосов
/ 09 мая 2019

Я ответил на аналогичный вопрос некоторое время назад.

См. Этот пост

Вы можете создать ContentControl в своем окне и переключить границу UserControl там, где пользователь нажимает или что-то еще

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...