본문 바로가기
Programming/C#

C#(WPF) - GUI 연습하기 2

by Wilkyway 2021. 10. 30.

오늘은 아래 유튜브 영상의 데스크탑 어플리케이션을 구현해보겠습니다.

https://www.youtube.com/watch?v=qSP8v8Gi3XU

 

1. 라이브러리 설치

이번 영상에서는 Material Design과 LiveCharts를 사용합니다. 아래의 명령으로 Package를 설치해줍니다.

dotnet add package MaterialDesignThemes --version 4.2.1 // material Design 설치
dotnet add package LiveCharts.Wpf --version 0.9.7 // live chart 설치

또는 Nuget GUI Manager 를 설치 후

 

Shift + Ctrl + P 로 명령창에서 Nuget 입력 시 나타나는 명령을 수행합니다.

그리고 Nuget Package Manager에서 아래와 같이 설치해줍니다. Material Design Themes와 Livecharts.wpf로 검색되는 패키지를 설치해줍니다.

귀차니즘....끄적끄적..

 

2. 라이브러리 적용

Material Design을 적용해야합니다. 적용하는 방법은 구글에서 < material design xaml >이라고 검색하면 나오는데, 여기 사이트를 참조하시면 되겠습니다. 그리고, 나중에 livechart에서 사용할 스타일도 정의해놓겠습니다.

<App.xaml>

<Application x:Class="wpf_test04UT2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:wpf_test04UT2"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="lvc:LineSeries">
                <Setter Property="StrokeThickness" Value="3"></Setter>                
                <Setter Property="Fill" Value="#4EFFFFFF"></Setter>                
                <Setter Property="PointGeometrySize" Value="0"></Setter>
                <Setter Property="LineSmoothness" Value="0"></Setter>
            </Style>
            <Style TargetType="lvc:Axis">
                <Setter Property="ShowLabels" Value="False"></Setter>                
                <Setter Property="IsEnabled" Value="False"></Setter>                                
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

3. 메인프레임 구성

메인 프레임에서는 전체적인 틀을 Grid 레이아웃으로 잡아주고, 좌측 그리드에 메뉴를 Material Design Icon으로 구성합니다.

<MainWindow.xaml>

<Window x:Class="wpf_test04UT2.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:wpf_test04UT2"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" Height="850" Width="1200"
        WindowStartupLocation="CenterScreen"        
        WindowStyle="None"
        Background="{x:Null}"
        AllowsTransparency="True" Loaded="Window_Loaded">
    <Grid>
        <materialDesign:Card Margin="10" UniformCornerRadius="15">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="15*" />
                </Grid.ColumnDefinitions>
                <Grid.Resources>
                    <Style TargetType="materialDesign:PackIcon">
                        <Setter Property="Width" Value="30"></Setter>
                        <Setter Property="Height" Value="30"></Setter>
                    </Style>
                </Grid.Resources>
                <Grid Grid.Column="0">
                    <ListView Margin="0 15">
                        <ListViewItem HorizontalAlignment="Center" Margin="0 10">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="Resistor" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                        <ListViewItem HorizontalAlignment="Center" Margin="0 10">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="CircleSlice6" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                        <ListViewItem HorizontalAlignment="Center" Margin="0 10">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="CalendarBlankOutline" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                        <ListViewItem HorizontalAlignment="Center" Margin="0 10">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="EqualiserVertical" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                        <ListViewItem HorizontalAlignment="Center" Margin="0 10">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="ChatOutline" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                        <ListViewItem HorizontalAlignment="Center" Margin="0 60 0 0">
                            <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left" 
                            BorderBrush="{x:Null}" Foreground="Black" x:Name="btnExit" Click="btnExit_click">
                                <StackPanel Margin="-5">
                                    <materialDesign:PackIcon Kind="ExitToApp" />
                                </StackPanel>
                            </Button>
                        </ListViewItem>
                    </ListView>
                </Grid>
                <Grid Grid.Column="1" Background="#f6f5f8" Name="RenderPages">
                
                </Grid>
            </Grid>
        </materialDesign:Card>
    </Grid>
</Window>

이번 과제는 UI에 집중되어 있어서, cs파일에서는 별로 할일이 없습니다.

<MainWindow.xaml.cs>

using System.Windows;

namespace wpf_test04UT2
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            RenderPages.Children.Clear();
            RenderPages.Children.Add(new Dashboard());
        }
        private void btnExit_click(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }
    }
}

 

4. 내부 Dashboard 작성

메인프레임에 뿌려줄 '내부'를 별도파일(UserControl)로 구현합니다. Material Design 사용하니까 이쁘고 좋긴 한데, 코드가 길어지고....익숙해지는데 시간이 좀 필요하겠네요..

<Dashboard.xaml>

<UserControl x:Class="wpf_test04UT2.Dashboard"
        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:wpf_test04UT2"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.wpf"
        mc:Ignorable="d"
        Height="850" Width="1100">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="8*" />
        <ColumnDefinition Width="4*" />
      </Grid.ColumnDefinitions>
      <Grid.Resources>
        <Style TargetType="materialDesign:PackIcon">
          <Setter Property="Width" Value="30"></Setter>
          <Setter Property="Height" Value="30"></Setter>
        </Style>
      </Grid.Resources>
      <Grid Grid.Column="0" Background="#f6f6f8">
        <StackPanel Margin="10">
            <Grid Height="60">
              <Button Style="{StaticResource MaterialDesignFloatingActionButton}" HorizontalAlignment="Left"
              BorderBrush="{x:Null}" Background="{x:Null}">
                <StackPanel Margin="5">
                  <materialDesign:PackIcon Kind="ReorderHorizontal" Foreground="Gray" />
                </StackPanel>
              </Button>
              <ComboBox HorizontalAlignment="Right" Width="100" materialDesign:HintAssist.Hint="Last 15 Days">
                <ComboBoxItem>
                  <TextBlock Text="Last 15 Days" />
                </ComboBoxItem>
                <ComboBoxItem>
                  <TextBlock Text="Last 30 Days" />
                </ComboBoxItem>
              </ComboBox>
            </Grid>
            <WrapPanel HorizontalAlignment="Center">
              <Border BorderBrush="White" BorderThickness="5" Margin="20 0" CornerRadius="15">
                <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth0" UniformCornerRadius="15" BorderThickness="5"
                BorderBrush="White" Width="110" Height="130" Background="#F6F6F8">
                  <StackPanel Margin="10">
                    <materialDesign:PackIcon Kind="Twitter" Foreground="#29A3EC" />
                    <TextBlock FontWeight="SemiBold" FontSize="25" Text="280K" Margin="0 10 0 0" />
                    <TextBlock FontSize="12" Text="Follwers" />
                    <materialDesign:PackIcon Kind="EllipsisHorizontal" HorizontalAlignment="Right" />
                  </StackPanel>
                </materialDesign:Card>
              </Border>
              <Border BorderBrush="White" BorderThickness="5" Margin="20 0" CornerRadius="15">
                <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth0" UniformCornerRadius="15" BorderThickness="5"
                BorderBrush="White" Width="110" Height="130" Background="#F6F6F8">
                  <StackPanel Margin="10">
                    <materialDesign:PackIcon Kind="Instagram">
                      <materialDesign:PackIcon.Foreground>
                        <LinearGradientBrush StartPoint="1,0" EndPoint="0.5,1">
                          <GradientStop Color="#912A73" Offset="0" />
                          <GradientStop Color="#FA8E22" Offset="1" />
                        </LinearGradientBrush>
                      </materialDesign:PackIcon.Foreground>
                    </materialDesign:PackIcon>
                    <TextBlock FontWeight="SemiBold" FontSize="25" Text="690K" Margin="0 10 0 0" />
                    <TextBlock FontSize="12" Text="Followers" />
                    <materialDesign:PackIcon Kind="EllipsisHorizontal" HorizontalAlignment="Right" />
                  </StackPanel>
                </materialDesign:Card>
              </Border>
              <Border BorderBrush="White" BorderThickness="5" Margin="20 0" CornerRadius="15">
                <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth0" UniformCornerRadius="15" BorderThickness="5"
                BorderBrush="White" Width="110" Height="130" Background="#F6F6F8">
                  <StackPanel Margin="10">
                    <materialDesign:PackIcon Kind="Youtube" Foreground="#29A3EC" />
                    <TextBlock FontWeight="SemiBold" FontSize="25" Text="2.3M" Margin="0 10 0 0" />
                    <TextBlock FontSize="12" Text="Follwers" />
                    <materialDesign:PackIcon Kind="EllipsisHorizontal" HorizontalAlignment="Right" />
                  </StackPanel>
                </materialDesign:Card>
              </Border>
              <Border BorderBrush="White" BorderThickness="5" Margin="20 0" CornerRadius="15">
                <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth0" UniformCornerRadius="15" BorderThickness="5"
                BorderBrush="White" Width="110" Height="130" Background="#F6F6F8">
                  <StackPanel Margin="10">
                    <materialDesign:PackIcon Kind="Facebook" Foreground="#29A3EC" />
                    <TextBlock FontWeight="SemiBold" FontSize="25" Text="60K" Margin="0 10 0 0" />
                    <TextBlock FontSize="12" Text="Follwers" />
                    <materialDesign:PackIcon Kind="EllipsisHorizontal" HorizontalAlignment="Right" />
                  </StackPanel>
                </materialDesign:Card>
              </Border>
            </WrapPanel>
            <materialDesign:Card Margin="30 20" UniformCornerRadius="20">
              <StackPanel>
                <Grid>
                  <TextBlock Margin="20" HorizontalAlignment="Left" FontWeight="SemiBold" Text="Instagram Subscribers" FontSize="18"/>
                  <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <TextBlock FontWeight="ExtraBold" FontSize="14" Text="&#xF06C;" FontFamily="wingdings" VerticalAlignment="Center" Foreground="#42A5F4" />
                    <TextBlock Text="Gained" HorizontalAlignment="Right" VerticalAlignment="Center" FontWeight="SemiBold" FontSize="14" Margin="5 0 10 0"/>
                    <TextBlock FontWeight="ExtraBold" FontSize="14" Text="&#xF06C;" FontFamily="wingdings" VerticalAlignment="Center" Foreground="#F55F54" />
                    <TextBlock Text="Lost" HorizontalAlignment="Right" VerticalAlignment="Center" FontWeight="SemiBold" FontSize="14" Margin="5 0 20 0" />
                  </StackPanel>
                </Grid>
                <lvc:CartesianChart Series="{Binding SeriesCollection}" Foreground="Black" Margin="10 0" Height="200">
                  <lvc:CartesianChart.AxisX>
                    <lvc:Axis Labels="{Binding Labels}" Separator="{x:Static lvc:DefaultAxes.CleanSeparator}" />
                  </lvc:CartesianChart.AxisX>
                  <lvc:CartesianChart.AxisY>  
                    <lvc:Axis LabelFormatter="{Binding Formatter}" />
                  </lvc:CartesianChart.AxisY>
                </lvc:CartesianChart>
              </StackPanel>              
            </materialDesign:Card>
            <WrapPanel HorizontalAlignment="Center">
              <materialDesign:Card Margin="10" UniformCornerRadius="20" Padding="10">
                <StackPanel>
                  <TextBlock Text="Key Matrics" Margin="10 20" FontWeight="SemiBold"/>
                  <Grid Height="150">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition />
                      <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition />
                      <RowDefinition />
                      <RowDefinition />
                      <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="Clicks" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="13" FontWeight="SemiBold" />
                    <TextBlock Text="Links" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="13" FontWeight="SemiBold" />
                    <TextBlock Text="Followers" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="13" FontWeight="SemiBold" />
                    <TextBlock Text="Impressions" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="13" FontWeight="SemiBold" />
                    <StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                      <TextBlock Text="10K" FontWeight="SemiBold" Margin="5 0" />
                      <ProgressBar Margin="5 0" Width="100" Height="8" Foreground="#FFFFFF13" Background="#FFE8E8E8" BorderBrush="#FFF3F349" Value="78" />
                      <TextBlock Text="12K" FontWeight="SemiBold" />
                    </StackPanel>
                    <StackPanel Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                      <TextBlock Text="10K" FontWeight="SemiBold" Margin="5 0" />
                      <ProgressBar Margin="5 0" Width="100" Height="8" Foreground="#FFFFFF13" Background="#FFE8E8E8" BorderBrush="#FFF3F349" Value="78" />
                      <TextBlock Text="12K" FontWeight="SemiBold" />
                    </StackPanel>
                    <StackPanel Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                      <TextBlock Text="10K" FontWeight="SemiBold" Margin="5 0" />
                      <ProgressBar Margin="5 0" Width="100" Height="8" Foreground="SeaGreen" Background="#FFE8E8E8" BorderBrush="SeaGreen" Value="78" />
                      <TextBlock Text="12K" FontWeight="SemiBold" />
                    </StackPanel>
                    <StackPanel Grid.Column="1" Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                      <TextBlock Text="10K" FontWeight="SemiBold" Margin="5 0" />
                      <ProgressBar Margin="5 0" Width="100" Height="8" Foreground="SeaGreen" Background="#FFE8E8E8" BorderBrush="SeaGreen" Value="78" />
                      <TextBlock Text="12K" FontWeight="SemiBold" />
                    </StackPanel>                    
                  </Grid>
                </StackPanel>
              </materialDesign:Card>
              <materialDesign:Card Margin="10" UniformCornerRadius="20" Background="#633648">
                <StackPanel Margin="10">
                  <TextBlock Text="Engagged Users" FontSize="14" Foreground="White" TextAlignment="Center" />
                  <TextBlock Text="12.5K" TextAlignment="Center" Margin="0 5" Foreground="White" FontSize="18" />
                  <lvc:CartesianChart Margin="0 5" Series="{Binding LastHourSeries}" Hoverable="False" DataTooltip="{x:Null}" Height="160" Width="160">
                    <lvc:CartesianChart.AxisX>
                      <lvc:Axis MinValue="0" />
                    </lvc:CartesianChart.AxisX>
                  </lvc:CartesianChart>
                  <materialDesign:PackIcon Kind="ArrowUp" HorizontalAlignment="Center" Margin="0 5" Width="20" Height="20" Foreground="#62A78B" />
                </StackPanel>
              </materialDesign:Card>
              <materialDesign:Card Margin="10" UniformCornerRadius="20" Background="#633648">
                <StackPanel Margin="10">
                  <TextBlock Text="Page Impression" FontSize="14" Foreground="White" TextAlignment="Center" />
                  <TextBlock Text="12.5K" TextAlignment="Center" Margin="0 5" Foreground="White" FontSize="18" />
                  <lvc:CartesianChart Margin="0 5" Series="{Binding LastHourSeries1}" Hoverable="False" DataTooltip="{x:Null}" Height="160" Width="160">
                    <lvc:CartesianChart.AxisX>
                      <lvc:Axis MinValue="0" />
                    </lvc:CartesianChart.AxisX>
                  </lvc:CartesianChart>
                  <materialDesign:PackIcon Kind="ArrowUp" HorizontalAlignment="Center" Margin="0 5" Width="20" Height="20" Foreground="#62A78B" />
                </StackPanel>
              </materialDesign:Card>
            </WrapPanel>
        </StackPanel>
      </Grid>
      <StackPanel Grid.Column="1" Background="White">
        <WrapPanel VerticalAlignment="Top" Margin="20 20 20 10">
          <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black">
            <StackPanel Margin="-5">
              <materialDesign:PackIcon Kind="BellOutline" />
            </StackPanel>
          </Button>
          <Button Background="#FFFFEEFA" BorderBrush="#FFFFEEFA" Foreground="#FFF0689E" Margin="10 0" Height="40">
            <WrapPanel HorizontalAlignment="Center" >
              <materialDesign:PackIcon Kind="GiftOutline" Width="25" Height="25" />
              <TextBlock Text="2 NEW UPDATES" VerticalAlignment="Center" FontWeight="SemiBold" Margin="10 0" />
            </WrapPanel>
          </Button>
          <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black">
            <StackPanel Margin="-5">
              <materialDesign:PackIcon Kind="BellOutline" />
            </StackPanel>
          </Button>
        </WrapPanel>
        <Border Margin="40 10" CornerRadius="20" Background="#FFFFFEFA">
          <Image Source="Images/aaa.jpg" Stretch="Uniform" x:Name="ImgCartoon" Height="150" />
        </Border>
        <Calendar Margin="45 10" />
        <materialDesign:Card Margin="20 10" Padding="5" UniformCornerRadius="20" HorizontalAlignment="Center">
          <WrapPanel Margin="10">
            <materialDesign:PackIcon Kind="HandPeace" Foreground="#FFC83D" VerticalAlignment="Center" Margin="10 0" />
            <TextBlock Margin="10 0" VerticalAlignment="Center">
              <TextBlock.Inlines>
                <Run Text="Say Hi To" />
                <Run Text="Laith Hart" FontWeight="SemiBold" FontSize="14" />
              </TextBlock.Inlines>
            </TextBlock>
            <Image Source="Images/bbb.jpg" Width="40" Height="40" x:Name="avatar1" Margin="10 0" />
          </WrapPanel>
        </materialDesign:Card>
        <materialDesign:Card Margin="20 10" Padding="5" UniformCornerRadius="20" HorizontalAlignment="Center">
          <WrapPanel Margin="10">
            <materialDesign:PackIcon Kind="HandPeace" Foreground="#FFC83D" VerticalAlignment="Center" Margin="10 0" />
            <TextBlock Margin="10 0" VerticalAlignment="Center">
              <TextBlock.Inlines>
                <Run Text="Say Hi To" />
                <Run Text="Laith Hart" FontWeight="SemiBold" FontSize="14" />
              </TextBlock.Inlines>
            </TextBlock>
            <Image Source="Images/bbb.jpg" Width="40" Height="40" x:Name="avatar2" Margin="10 0" />
          </WrapPanel>
        </materialDesign:Card>
      </StackPanel>
    </Grid>
</UserControl>

 

차트에 뿌려줄 데이터 및 동작을 cs파일에 구현합니다.

<Dashboard.xaml.cs>

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.IO;
using LiveCharts.Defaults;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace wpf_test04UT2
{

  public partial class Dashboard : UserControl
  {
    public SeriesCollection SeriesCollection { get; set; }
    public SeriesCollection LastHourSeries { get; set;  }
    public SeriesCollection LastHourSeries1 { get; set;  }
    public string[] Labels { get; set; }
    public Func<double,string> Formatter { get; set; }    
    public Dashboard()
    {
      InitializeComponent();
      SeriesCollection = new SeriesCollection{
        new StackedColumnSeries
        {
          Values = new ChartValues<double> {25, 52, 61, 89},
          StackMode = StackMode.Values,
          DataLabels = true
        },
        new StackedColumnSeries
        {
          Values = new ChartValues<double> {-15, -75, -16, -49},
          StackMode = StackMode.Values,
          DataLabels = true
        }
      };
      LastHourSeries = new SeriesCollection
      {
        new LineSeries
        {
          AreaLimit = -10,
          Values = new ChartValues<ObservableValue>
          {
            new ObservableValue(3),
            new ObservableValue(1),
            new ObservableValue(9),
            new ObservableValue(4),
            new ObservableValue(5),
            new ObservableValue(3),
            new ObservableValue(1),
            new ObservableValue(2),
            new ObservableValue(3),
            new ObservableValue(7),
          }
        }
      };
      LastHourSeries1 = new SeriesCollection
      {
        new LineSeries
        {
          AreaLimit = -10,
          Values = new ChartValues<ObservableValue>
          {
            new ObservableValue(13),
            new ObservableValue(11),
            new ObservableValue(9),
            new ObservableValue(14),
            new ObservableValue(5),
            new ObservableValue(3),
            new ObservableValue(1),
            new ObservableValue(2),
            new ObservableValue(3),
            new ObservableValue(7),
          }
        }
      };
      Labels = new[] { "Feb 7", "Feb8", "Feb 9", "Feb 10" };
      Formatter = GetValue => GetValue.ToString();
      DataContext = this;
      string imgCartoon = Directory.GetCurrentDirectory().ToString()+"\\Images\\aaa.jpg";      
      string imgavatar  = Directory.GetCurrentDirectory().ToString()+"\\Images\\bbb.jpg";   
      ImgCartoon.Source = new BitmapImage(new Uri(imgCartoon));
      avatar1.Source = new BitmapImage(new Uri(imgavatar));
      avatar2.Source = new BitmapImage(new Uri(imgavatar));
    }    
  }  
}

 

5. 결과

좀 있어보이나요? 좌측 메뉴가 동영상 강좌랑 달리 스타일이 안들어간 것 같습니다만, 수정하기 귀찮네요..필요할 때 하다보면 되겠죠..??ㅠㅠ

 

~~~끝~~~

태그

, , , ,

댓글0