0

I am Working on Windows Phone 8 app Development.

I have working model of Pie chart:

Below is the Screen shot before click:

enter image description here

Below is the Screen shot after click on Blue slice:

enter image description here

I have a issue here when i select the Pie slice the color of the slice is getting changed,but i dont want the color of the slice to be changed. How can i acheive this?

I have tried to change that using blend but its not showing me the states.

Here is my code :

<charting:Chart
                Height="400"
                Style="{StaticResource PhoneChartStyle}"
                Template="{StaticResource PhoneChartPortraitTemplate}"
                x:Name="MyPieSeriesChart">
                <!-- Series -->
                <charting:PieSeries
                    Tap="PieSeries_Tap"
                    DoubleTap="PieSeries_DoubleTap"
                    IsSelectionEnabled="True"
                    ItemsSource="{StaticResource Activities}"
                    DependentValuePath="Count"
                    IndependentValuePath="Activity">
                    <charting:PieSeries.LegendItemStyle>
                        <Style TargetType="charting:LegendItem">
                            <Setter Property="Margin" Value="5 0 15 0"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Style>
                    </charting:PieSeries.LegendItemStyle>
                </charting:PieSeries>
            </charting:Chart>

PhoneChartStyle and PhoneChartPortraitTemplate code ;

<ControlTemplate x:Key="PhoneChartPortraitTemplate" TargetType="charting:Chart">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <datavis:Title
                Content="{TemplateBinding Title}"
                Style="{TemplateBinding TitleStyle}"/>
            <datavis:Legend x:Name="Legend"
                Grid.Row="2"
                Header="{TemplateBinding LegendTitle}"
                Style="{TemplateBinding LegendStyle}">
                <datavis:Legend.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </datavis:Legend.ItemsPanel>
                <datavis:Legend.Template>
                    <ControlTemplate TargetType="datavis:Legend">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <ScrollViewer
                                    Grid.Row="1"
                                    HorizontalScrollBarVisibility="Auto"
                                    VerticalScrollBarVisibility="Disabled"
                                    BorderThickness="0"
                                    Padding="0"
                                    IsTabStop="False">
                                <ItemsPresenter
                                        x:Name="Items"
                                        Margin="10,0,10,10"/>
                            </ScrollViewer>
                        </Grid>
                    </ControlTemplate>
                </datavis:Legend.Template>
            </datavis:Legend>
            <chartingprimitives:EdgePanel
                Grid.Column="0"
                Grid.Row="1"
                x:Name="ChartArea"
                Style="{TemplateBinding ChartAreaStyle}">
                <Grid
                    Canvas.ZIndex="-1"
                    Style="{TemplateBinding PlotAreaStyle}" />
            </chartingprimitives:EdgePanel>
        </Grid>
    </ControlTemplate>

    <!-- Chart Style for Phone -->
    <Style x:Key="PhoneChartStyle" TargetType="charting:Chart">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Palette">
            <Setter.Value>
                <datavis:ResourceDictionaryCollection>
                    <!-- Blue -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#E85F3D"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                    <!-- Red -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#76D164"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                    <!-- Light Green -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#648ED1"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                </datavis:ResourceDictionaryCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="datavis:Legend">
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
                    <Setter Property="Margin" Value="20"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100" />
                    <Setter Property="MinHeight" Value="75" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="PlotAreaStyle">
            <Setter.Value>
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template" Value="{StaticResource PhoneChartPortraitTemplate}"/>
    </Style>
Goofy
  • 6,098
  • 17
  • 90
  • 156

1 Answers1

1

You should edit your DataPointStyle (right click in Visual Studio -> Edit Additional Templates -> Edit DataPointStyle -> Edit a copy), find this code below and remove the Storyboard from the Selected state:

<VisualStateGroup x:Name="SelectionStates">
    <VisualStateGroup.Transitions>
        <VisualTransition GeneratedDuration="0:0:0.1"/>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="Unselected"/>
    <VisualState x:Name="Selected">
        <!-- This storyboard should be removed -->
        <!--<Storyboard>
            <DoubleAnimation
                Storyboard.TargetName="SelectionHighlight"
                Storyboard.TargetProperty="Opacity"
                To="0.6"
                Duration="0"/>
        </Storyboard>-->
    </VisualState>
</VisualStateGroup>

Then update its name

<Style x:Name="NewDataPointStyle" TargetType="charting:PieDataPoint">

And set it to data points of your chart. Then you will probably encounter a bug when all slices will have the same color (orange). If windows 8 didn't fix this bug yet, you can use your own Palette like I explained in this answer about chart colors

I see you have your code for the Palette property, so you should change it like this, I added BasedOn="{StaticResource NewDataPointStyle}" and changed TargetType="charting:PieDataPoint":

<Setter Property="Palette">
<Setter.Value>
<datavis:ResourceDictionaryCollection>
    <!-- Blue -->
    <ResourceDictionary>
        <SolidColorBrush x:Key="Background" Color="#E85F3D"/>
        <Style x:Key="DataPointStyle" TargetType="charting:PieDataPoint" BasedOn="{StaticResource NewDataPointStyle}">
            <Setter Property="Background" Value="{StaticResource Background}" />
        </Style>
    ...
Community
  • 1
  • 1
vortexwolf
  • 13,967
  • 2
  • 54
  • 72