StackedBarSeries上的Silverlight DataVisualization Charting Gradient

时间:2014-09-15 13:20:20

标签: xaml silverlight charts

我正在使用Silverlight图表控件:System.Windows.Controls.DataVisualization.Charting并且我希望移除条形图上底部的颜色是实心的渐变并且朝向顶部变浅,所以我我正在寻找的是一个坚固的酒吧而不是渐变。

我已经设法从Blend获取图表控件的原始样式,并将以下内容添加到我自己的样式中:

<Setter Property="PlotAreaStyle">
    <Setter.Value>
        <Style TargetType="Grid">
            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="Transparent"/>
                        <GradientStop Color="Black" Offset="0"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Setter.Value>
</Setter>

有人可以帮助我,因为我是Silverlight的新手并花了很多时间试图找到解决方案,我使用这个网站作为最后的手段。

这是我用于图表控件的代码。

<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0"  BorderBrush="Transparent"  x:Name="SummaryGraph"
                                Style="{StaticResource SummaryGraphStyle}" 
                                VerticalAlignment="Stretch" HorizontalAlignment="Center">

    <charting:ColumnSeries>
        <charting:ColumnSeries.DataPointStyle>
            <Style TargetType="charting:ColumnDataPoint">
                <Setter Property="Background" Value="Black" />
            </Style>
        </charting:ColumnSeries.DataPointStyle>
    </charting:ColumnSeries>

    <charting:Chart.Axes>
        <DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
        <charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" />
    </charting:Chart.Axes>

</charting:Chart>

非常感谢,

我现在使用提供的样式的代码:

<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0"  BorderBrush="Transparent"  x:Name="SummaryGraph"
                                Style="{StaticResource SummaryGraphStyle}"
                                VerticalAlignment="Stretch" HorizontalAlignment="Center">

        <!--<charting:ColumnSeries DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}" />

    <charting:ColumnSeries>
        <charting:ColumnDataPoint Style="{StaticResource ColumnDataPointNoGradientStyle}"></charting:ColumnDataPoint>
    </charting:ColumnSeries>-->

    <charting:StackedColumnSeries>
        <charting:SeriesDefinition DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}"/>
    </charting:StackedColumnSeries>

    <charting:Chart.Axes>
        <DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
        <charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" >
        </charting:CategoryAxis>
    </charting:Chart.Axes>

</charting:Chart>

1 个答案:

答案 0 :(得分:1)

您需要修改ColumnSeries上的DataPointStyle背景。尝试将样式直接设置为StackedColumnSeries

xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit

   <toolkit:Chart>
    <toolkit:ColumnSeries Title="{Binding ...}" ItemsSource="{Binding ...}" IndependentValuePath="..." DependentValuePath="...">
       <toolkit:ColumnSeries.DataPointStyle>
      <Style x:Key="ColumnDataPointNoGradientStyle" TargetType="toolkit:ColumnDataPoint">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:ColumnDataPoint">
                    <Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
                        <ToolTipService.ToolTip>
                            <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
                        </ToolTipService.ToolTip>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="RevealStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Shown">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Background="{TemplateBinding Background}">
                            <Rectangle Visibility="Collapsed">
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <GradientStop Color="#77ffffff" Offset="0"/>
                                        <GradientStop Color="#00ffffff" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border BorderBrush="#ccffffff" BorderThickness="1" Visibility="Collapsed">
                                <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                            </Border>
                            <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                            <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
       </toolkit:ColumnSeries.DataPointStyle>
    </toolkit:ColumnSeries>
   <toolkit:Chart>

这是完整的DataPointStyle。唯一的修改是添加折叠到渐变矩形的可见性:<Rectangle Visibility="Collapsed">(位于底部附近)