Fluid indicator
This time we’ve implemented an awesome indicator.
Description
This example displays an indicator with a fancy look and feel. The fill inside has a “fluid” with nice waves effect.
Static implementation
<Circle Size="100" Color="Black">
<Stroke Width="4" Color="#00c000"/>
<Circle Size="84">
<Mask File="whiteCircle.png" Mode="Alpha" />
<Rectangle Layer="Background" Size="150%" CornerRadius="50" Color="#00ca00" Y="45">
<WhileEnabled>
<Spin Frequency=".2"/>
</WhileEnabled>
<Shadow Color="#00ff00" Size="20" Distance="0" />
</Rectangle>
</Circle>
<Text Value="50%" Alignment="Center" FontSize="24" Layer="Overlay" Color="#00ff00"/>
</Circle>
The code above shows the whole mark-up of the indicators implementation. It consist of the black circle with green stroke.
This outer circle contains the smaller circle that masked by the png
image using Mode="Alpha"
.
The waves effect achived by spinning the rectangle with rounded corners. Glow effect is a simple shadow.
The level of liquid is controling by the value of the Y
property of the Rectangle
.
Speed of spin can be chaged via Frequency
property of the <Spin />
.
Dynamic implementation
The dynamic changing of the indicator’s appearance will looks like this
<Circle ux:Class="FluidIndicator" Size="{ReadProperty Diameter}" Color="Black">
<int ux:Property="Diameter"/>
<float ux:Property="Max"/>
<float ux:Property="Value"/>
<float4 ux:Property="Color"/>
<float4 ux:Property="TextColor"/>
<Stroke Width="4" Color="{ReadProperty Color} * 0.9"/>
<Circle Size="84">
<Mask File="whiteCircle.png" Mode="Alpha" />
<Rectangle Layer="Background"
Size="175%"
CornerRadius="40"
Color="{ReadProperty Color}"
Opacity=".8"
Y="{ReadProperty Diameter} * (1 - {ReadProperty Value} / {ReadProperty Max})">
<WhileEnabled>
<Spin Frequency=".2"/>
</WhileEnabled>
<Shadow Color="{ReadProperty Color}" Size="20" Distance="0" />
</Rectangle>
</Circle>
<Text Value="{ReadProperty Value}%"
Alignment="Center"
FontSize="24"
Layer="Overlay"
Color="{ReadProperty TextColor}"/>
</Circle>
I’m pretty sure that there is nothing to explain. Everything is obvious.
Usage
Usage of the indicator can be like
<StackPanel Alignment="Center" Width="200">
<Slider Name="sl" Alignment="Top" Minimum="0" Maximum="100" Value="0" UserStep="1"/>
<FluidIndicator Diameter="100" Max="100" Value="{Property sl.Value}" Color="#0f0" TextColor="Red"/>
</StackPanel>
That’s it. Hope you enjoyed this journey!
Full code
<App Background="#000">
<!-- Static Indicator -->
<!-- <Circle Size="100" Color="Black">
<Stroke Width="4" Color="#00c000"/>
<Circle Size="84">
<Mask File="whiteCircle.png" Mode="Alpha" />
<Rectangle Layer="Background" Size="150%" CornerRadius="50" Color="#00ca00" Y="45">
<WhileEnabled>
<Spin Frequency=".2"/>
</WhileEnabled>
<Shadow Color="#00ff00" Size="20" Distance="0" />
</Rectangle>
</Circle>
<Text Value="50%" Alignment="Center" FontSize="24" Layer="Overlay" Color="#00ff00"/>
</Circle> -->
<!-- Dynamic Indicator -->
<Circle ux:Class="FluidIndicator" Size="{ReadProperty Diameter}" Color="Black">
<int ux:Property="Diameter"/>
<float ux:Property="Max"/>
<float ux:Property="Value"/>
<float4 ux:Property="Color"/>
<float4 ux:Property="TextColor"/>
<Stroke Width="4" Color="{ReadProperty Color} * 0.9"/>
<Circle Size="84">
<Mask File="whiteCircle.png" Mode="Alpha" />
<Rectangle Layer="Background"
Size="175%"
CornerRadius="40"
Color="{ReadProperty Color}"
Opacity=".8"
Y="{ReadProperty Diameter} * (1 - {ReadProperty Value} / {ReadProperty Max})">
<WhileEnabled>
<Spin Frequency=".2"/>
</WhileEnabled>
<Shadow Color="{ReadProperty Color}" Size="20" Distance="0" />
</Rectangle>
</Circle>
<Text Value="{ReadProperty Value}%"
Alignment="Center"
FontSize="24"
Layer="Overlay"
Color="{ReadProperty TextColor}"/>
</Circle>
<!-- Usage -->
<StackPanel Alignment="Center" Width="200">
<Slider Name="sl" Alignment="Top" Minimum="0" Maximum="100" Value="0" UserStep="1"/>
<FluidIndicator Diameter="100" Max="100" Value="{Property sl.Value}" Color="#0f0" TextColor="Red"/>
</StackPanel>
</App>