Change Color of PageIndicator

How-to Discussions
1

I am trying to change the color of the bullets of a PageIndicator but I cant. How can I do this?

Thanks!

2

It’s easiest to just specify the dot entirely via a factory. For example, first declare the factory type and style:

<Star ux:Class="MyDot"/>
<Style>
    <MyDot Width="30" Height="30">
        <SolidColor Color="0.5,0.5,0,0.3" ux:Name="TheColor"/>
        <Activating>
            <Change Target="TheColor.Color" Value="0.5,0.5,0,1"/>
        </Activating>
        <Enter>
            <Change Target="TheColor.Color" Value="0.5,0,0.5,0.3"/>
        </Enter>
    </MyDot>
</Style>

Then use this in the PageIndicator:

<PageIndicator PageProgress="MyPages" Orientation="Vertical">
    <MyDot ux:Generate="Factory" ux:Binding="DotFactory"/>
</PageIndicator>
3

What edA-qa said, except I think this more compact syntax should also work:

<PageIndicator PageProgress="MyPages" Orientation="Vertical">
    <Rectangle ux:Generate="Factory" ux:Binding="DotFactory">
        <SolidColor Color="0.5,0.5,0,0.3" ux:Name="TheColor"/>
        <Activating>
            <Change Target="TheColor.Color" Value="0.5,0.5,0,1"/>
        </Activating>
        <Enter>
            <Change Target="TheColor.Color" Value="0.5,0,0.5,0.3"/>
        </Enter>
    </Rectangle>
</PageIndicator>
4

I try to implement the code of edA-qa mort-ora-y but I get this error:

The style is adding 'TheColor' to the 'Fills' list of 'MyDot', which is not a styleable list. This may lead to incorrect design time behavior. - /Users/cristiankarmy/Fuse/findit 1.0/MainView.ux(237:1):

And the PageIndicators dont appear!

The Code of Anders Lassen I dont get any error but the PageIndicators dont appear…

5

Fixed! I use the example of Anders Lassen! I forgot to put the Width and Height!

<PageIndicator PageProgress="MyPages" Orientation="Vertical">
<Rectangle Width="10" Height="10" ux:Generate="Factory" ux:Binding="DotFactory">
    <SolidColor Color="0.5,0.5,0,0.3" ux:Name="TheColor"/>
    <Activating>
        <Change Target="TheColor.Color" Value="0.5,0.5,0,1"/>
    </Activating>
    <Enter>
        <Change Target="TheColor.Color" Value="0.5,0,0.5,0.3"/>
    </Enter>
</Rectangle>

Thanks!