Linear Gradient inside While Tage

How-to Discussions
1

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">
					<Clicked>
						<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" />
      						</LinearGradient>
						</Set>						
					</Clicked>
				</Tab>
			</Panel>

Any suggestion what should I do …!?

2

Hey,

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.

<App>
    <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" />
        </LinearGradient>
        <Rectangle StrokeWidth="1" StrokeColor="#0004" />
        <WhilePressed>
            <Change overlay.Opacity="1" Duration="0.32" />
        </WhilePressed>
    </Panel>

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

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