<Page x:Class="StylesAndAnimation.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts"      
    Title="Page1" Height="300" Width="500">
    <Page.Resources>
        <Style x:Key="ChartStyle" TargetType="{x:Type vc:Chart}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Gray" Offset=".5"/>
                        <GradientStop Color="#FFB2ADAD" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="5"/>
        </Style>
        <Style x:Key="TitleStyle" TargetType="{x:Type vc:Title}">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontColor" Value="Gray"/>
        </Style>
        <Style x:Key="DataSeriesStyle" TargetType="{x:Type vc:DataSeries}">
            <Setter Property="MarkerType" Value="Diamond"/>
            <Setter Property="MarkerSize" Value="12"/>
        </Style>
    </Page.Resources>
    <Grid>
        <vc:Chart Theme="Theme1" Style="{StaticResource ChartStyle}">
            <vc:Chart.Titles>
                <vc:Title Text="Visifire Sample with Styling" Style="{StaticResource TitleStyle}"/>
            </vc:Chart.Titles>
            <vc:Chart.Series>
                <vc:DataSeries RenderAs="Column">
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint YValue="28"/>
                        <vc:DataPoint YValue="50"/>
                        <vc:DataPoint YValue="35"/>
                        <vc:DataPoint YValue="24"/>
                        <vc:DataPoint YValue="48"/>
                        <vc:DataPoint YValue="60"/>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>
                <vc:DataSeries RenderAs="Line" Style="{StaticResource DataSeriesStyle}">
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint YValue="18"/>
                        <vc:DataPoint YValue="42"/>
                        <vc:DataPoint YValue="46"/>
                        <vc:DataPoint YValue="62"/>
                        <vc:DataPoint YValue="28"/>
                        <vc:DataPoint YValue="10"/>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>
            </vc:Chart.Series>
        </vc:Chart>
    </Grid>
</Page>
