Linear Gradient inside While Tage

Hi there,

I have a simple problem, I have set of buttons like navigation tabs and they are all in Liner Gradient color when the button is clicked I want to change the active button color to white then when clicking the other buttons the first button return back to be that gray gradient. I have accomplished the first part which make the color white but linear gradient won’t work inside a While Tage

        <Panel ux:Name="page1Tab" Margin="0,0,0,0">
				<Tab ux:Name="FirstTap" CornerRadius="3" Margin="5,0,0,0" TextColor="#6d6d6d" Text="Embarced">
						<Set navigation.Active="page1" />
						<Change FirstTap.Color="#fff"  />
						<Set SecondTap.LinearGradient>
							<LinearGradient StartPoint="0,0" EndPoint="0,1">
           					 <GradientStop Offset="0" Color="#fff" />
            				 <GradientStop Offset="1" Color="#ccc" />

Any suggestion what should I do …!?


You can add an overlay with Opacity=0 and white color. This will be our rest state with visible LinearGradient. Read this post about rest state and deviation from the rest state.

Inside WhilePressed change Opacity=1, so we can see overlay. The same can be applied to Clicked, but it depends on use case.

Here is a small example.

    <Panel ux:Class="VeryFancyButton">
        <Panel ux:Name="overlay" Color="#fff" Opacity="0" />
        <LinearGradient StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#18f" />
            <GradientStop Offset="1" Color="#fff" />
        <Rectangle StrokeWidth="1" StrokeColor="#0004" />
            <Change overlay.Opacity="1" Duration="0.32" />

    <VeryFancyButton Alignment="Center" Width="200" Height="68" />
1 Like

Great !! Great…
That was very helpful thanks @Arturs