aistudio-wpf-diagram/Live-Charts-master/Examples/UWP/CartesianChart/MaterialCards/MaterialCards.xaml

<Page x:Class="UWP.CartesianChart.MaterialCards.MaterialCards"
             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:lvc="using:LiveCharts.Uwp"
             mc:Ignorable="d" 
             d:DesignHeight="500" d:DesignWidth="800"
             Background="#E9E9E9">
    <Grid Height="500" Width="650" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid Margin="15, -60, 15, 15" MaxHeight="350" CornerRadius="4">
            <Grid.Resources>
                <Style TargetType="lvc:LineSeries">
                    <Setter Property="StrokeThickness" Value="3"></Setter>
                    <Setter Property="Stroke" Value="White"></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>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height=".50*"></RowDefinition>
                <RowDefinition Height=".5*"></RowDefinition>
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Grid.RowSpan="4" CornerRadius="4" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#CE2156" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    The Current Chart
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
            <lvc:CartesianChart Grid.Row="2" Margin="0, 0, 0, 0" Series="{Binding LastHourSeries}" Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.AxisX>
                    <!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
                    <lvc:Axis MinValue="2"></lvc:Axis>
                </lvc:CartesianChart.AxisX>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture}" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>

        <Grid Grid.Column="1" Margin="15, 60, 15, 15" MaxHeight="350" CornerRadius="4">
            <Grid.Resources>
                <Style TargetType="lvc:ColumnSeries">
                    <Setter Property="StrokeThickness" Value="0"></Setter>
                    <Setter Property="Stroke" Value="White"></Setter>
                    <Setter Property="Fill" Value="White"></Setter>
                    <Setter Property="MaxColumnWidth" Value="5"></Setter>
                </Style>
                <Style TargetType="lvc:Axis">
                    <Setter Property="FontSize" Value="12"></Setter>
                    <Setter Property="Foreground" Value="#64FFFFFF"></Setter>
                </Style>
                <Style TargetType="lvc:Separator">
                    <Setter Property="StrokeThickness" Value="1"></Setter>
                    <Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
                    <Setter Property="IsEnabled" Value="False"></Setter>
                    <Setter Property="Step" Value="1"></Setter>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height=".50*"></RowDefinition>
                <RowDefinition Height=".5*"></RowDefinition>
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Grid.RowSpan="4" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#EB5A13" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    Time Power
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
            <Button Grid.Row="3" Width="40" Height="40" VerticalAlignment="Top" 
                    HorizontalAlignment="Right" Margin="20, -20" Canvas.ZIndex="1"
                    Click="UpdateOnclick">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Stroke="Black" StrokeThickness="0" Fill="#CD2156">
                                
                            </Ellipse>
                            <Path Width="20" Height="20" Stretch="Fill" Fill="White" Data="F1 M 58,33.5001L 58,27L 49,19L 40,27.5001L 40,33.5001L 46,28.2097L 46,40.5C 46,46.299 41.299,51 35.5,51C 29.701,51 25,46.299 25,40.5C 25,34.8686 29.4332,30.2727 35,30.0117L 35,24.0074C 26.1186,24.2718 19,31.5546 19,40.5C 19,49.6127 26.3873,57 35.5,57C 44.6127,57 52,49.6127 52,40.5L 52,28.125L 58,33.5001 Z "/>
                            <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <lvc:CartesianChart Name="TimePowerChart" Grid.Row="2" Margin="10, 0, 10, 20"  Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.Series>
                    <lvc:ColumnSeries Values="{Binding Vals}"/>
                </lvc:CartesianChart.Series>
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis IsMerged="True" MaxValue="10">
                        <lvc:Axis.Separator>
                            <lvc:Separator IsEnabled="true" Step="{Binding Nan}"></lvc:Separator>
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">The Last 12 hours average <LineBreak /> Electricity Consumption</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="20.45" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</Page>