wpf View, Control 분리하여 Main xaml에 두 컨트롤 xaml 로드

핵심 코드

(Main 단 xaml , View, Controls 파일을 불러옴.)

xmlns:controls="clr-namespace:WiredBrainCoffee.CustomersApp05.Controls"
xmlns:view="clr-namespace:WiredBrainCoffee.CustomersApp05.View"

 

 

다른 폴더에 있는 Control 파일들을 불러와서 UI 합치기.

 

Folder : Controls

 -HeaderControl.xaml   (User Control 파일)

   - HeaderControl.xaml.cs     

Folder : Images

 - add.png

 - logo.png

 - move.png

 

Folder : View

 - CustomersView.xaml

   - CustomersView.xaml.cs

 

MainWindow.xaml

  - MainWindow.xaml.cs

---

Folder : Controls

 -HeaderControl.xaml   (User Control 파일)

<UserControl x:Class="WiredBrainCoffee.CustomersApp05.Controls.HeaderControl"
      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:WiredBrainCoffee.CustomersApp05.Controls"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800">

    <Grid Background="#F05A28">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Image Source="/Images/logo.png" Width="100" Margin="5"/>
            <TextBlock Text="Customers App" Foreground="White" FontSize="30" VerticalAlignment="Center"/>
            <TextBlock Text="Ver 1.0" VerticalAlignment="Bottom" FontSize="20"/>
        </StackPanel>
        
    </Grid>
</UserControl>

 

HeaderControl.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WiredBrainCoffee.CustomersApp05.Controls
{
  /// <summary>
  /// Interaction logic for HeaderControl.xaml
  /// </summary>
  public partial class HeaderControl : UserControl
  {
    public HeaderControl()
    {
      InitializeComponent();
    }
  }
}

 

 

 

Folder : Images

 - add.png

 - logo.png

 - move.png

add.png

0.00MB

logo.png

0.01MB

move.png

0.00MB

 

 

Folder : View

 - CustomersView.xaml

<UserControl x:Class="WiredBrainCoffee.CustomersApp05.View.CustomersView"
      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:WiredBrainCoffee.CustomersApp05.View"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        
        <!--Customer list-->
        <Grid x:Name="customerListGrid"
              Background="#777">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" >
                <Button Margin="10" Width="75">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Images/add.png" Height="18" Margin="0 0 5 0"/>
                        <TextBlock Text="Add"/>
                    </StackPanel>
                </Button>
                <Button Content="Delete" Margin="0 10 10 10"/>
                <Button Margin="0 10 10 10" Click="ButtonMoveNavigation_Click">
                    <Image Source="/Images/move.png" Height="18"/>
                </Button>
            </StackPanel>
            <ListView Grid.Row="1" Margin="10 0 10 10">
                <ListViewItem>Juhe</ListViewItem>
                <ListViewItem>James</ListViewItem>
                <ListViewItem>Alex</ListViewItem>
            </ListView>
        </Grid>
        
        <!--Customer detail-->
        <StackPanel Grid.Column="1" Margin="10">
            <Label>FirstName:</Label>
            <TextBox/>
            <Label>LastName:</Label>
            <TextBox/>
            <CheckBox Margin="0 10 0 0">
                Is developer
            </CheckBox>
        </StackPanel>
    </Grid>
</UserControl>

 

   - CustomersView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WiredBrainCoffee.CustomersApp05.View
{
  /// <summary>
  /// Interaction logic for CustomersView.xaml
  /// </summary>
  public partial class CustomersView : UserControl
  {
    public CustomersView()
    {
      InitializeComponent();
    }

    public void ButtonMoveNavigation_Click(object sender, RoutedEventArgs e)
    {
      var column = Grid.GetColumn(customerListGrid);
      var newColumn = column == 0 ? 2 : 0;
      Grid.SetColumn(customerListGrid, newColumn);

    }
  }
}

 

 

 

MainWindow.xaml

 

 

Control, View 컨트롤 파일들을  xaml에서 불러와서 메뉴와 status bar 뿐이었던 MainWindow xaml에 merge함., 

<Window x:Class="WiredBrainCoffee.CustomersApp05.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:WiredBrainCoffee.CustomersApp05"
        xmlns:controls="clr-namespace:WiredBrainCoffee.CustomersApp05.Controls"
        xmlns:view="clr-namespace:WiredBrainCoffee.CustomersApp05.View"
        mc:Ignorable="d"
        Title="Customers App" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Menu FontSize="20">
            <MenuItem Header="_View">
                <MenuItem Header="_Customers"/>
                <MenuItem Header="_Products"/>
            </MenuItem>
        </Menu>

        <controls:HeaderControl Grid.Row="1"/>
        <view:CustomersView Grid.Row="2"/>

        <StatusBar Grid.Row="3">
            <StatusBarItem FontSize="20" Content="(c) Wired Brain Coffee"/>
        </StatusBar>

    </Grid>
</Window>

 

  - MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WiredBrainCoffee.CustomersApp05
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

 

출처:

5 강

https://app.pluralsight.com/library/courses/wpf-6-fundamentals/table-of-contents

Sign In | Pluralsight