locked
How to make Appbar fade in with a preset Opacity value?

    Question

  •  <AppBar x:Name="ButtomAppbar" Padding="1,0,1,1" Opacity="0.6">

    As above.I set the Opacity  of AppBar to 0.6, but it dosn't apply until the AppBar finish loading.Can I make Opacity property work when the AppBar is loading? I tryed to modify the default styles of AppBar, but it didn't work too.

    My expression may be not very clear. Sorry for my poor English : )


    我是我,我非我。

    Monday, September 1, 2014 10:30 AM

Answers

  • I think I solved the problem.There is a simple way.Modity the default style of AppBar, specifically modify the Opacity or BorderBrush&Background of the Border of ControlTemplate.

       <Style x:Key="myAppBarStyle" TargetType="AppBar">
            	<Setter Property="Background" Value="{ThemeResource AppBarBackgroundThemeBrush}"/>
            	<Setter Property="BorderBrush" Value="{ThemeResource AppBarBorderThemeBrush}"/>
            	<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            	<Setter Property="VerticalContentAlignment" Value="Stretch"/>
            	<Setter Property="MinHeight" Value="{ThemeResource AppBarThemeMinHeight}"/>
            	<Setter Property="Template">
            		<Setter.Value>
            			<ControlTemplate TargetType="AppBar">
                            <Border x:Name="LayoutRoot" BorderBrush="#99000000" Background="#99000000">
    ..........
            				</Border>
            			</ControlTemplate>
            		</Setter.Value>
            	</Setter>
            </Style>


    我是我,我非我。

    • Marked as answer by Xijian Yan Wednesday, September 3, 2014 2:05 AM
    Wednesday, September 3, 2014 2:04 AM

All replies

  • Use animation to achieve that .

    This can be easily done adding the behaviour

    <i:Interaction.Triggers>
                		<i:EventTrigger SourceName="Appbarname" EventName="Loaded">
                			<eim:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                		</i:EventTrigger>
                	</i:Interaction.Triggers>
    
    

    Put this code inside the Appbar markup

    change the sourcename to your appbarname and

    chagne the event when you want to execute

    and put the following code in page markup

    	<phone:PhoneApplicationPage.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="chk1">
    				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.6"/>
    			</DoubleAnimationUsingKeyFrames>
    			
    		</Storyboard>
    	</phone:PhoneApplicationPage.Resources>

    i hope this will work for u


    Ramakant Verma .NET Consultant(Windows Azure, Windows Phone8,Windows 8,ASP.NET,Silverlight)

    Monday, September 1, 2014 11:33 AM
  • Instead of setting the Opacity property of the AppBar itself, you could set the Opacity property of the root element of the AppBar, for example the StackPanel, Grid or whatever layout panel you are using:

    <AppBar>
                    <StackPanel Opacity="0.1">
                        ...
                        </StackPanel>
            </AppBar>
    
    Using this approach there won't be any delay in the fading of the AppBar.
    Monday, September 1, 2014 11:50 AM
  • I think I solved the problem.There is a simple way.Modity the default style of AppBar, specifically modify the Opacity or BorderBrush&Background of the Border of ControlTemplate.

       <Style x:Key="myAppBarStyle" TargetType="AppBar">
            	<Setter Property="Background" Value="{ThemeResource AppBarBackgroundThemeBrush}"/>
            	<Setter Property="BorderBrush" Value="{ThemeResource AppBarBorderThemeBrush}"/>
            	<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            	<Setter Property="VerticalContentAlignment" Value="Stretch"/>
            	<Setter Property="MinHeight" Value="{ThemeResource AppBarThemeMinHeight}"/>
            	<Setter Property="Template">
            		<Setter.Value>
            			<ControlTemplate TargetType="AppBar">
                            <Border x:Name="LayoutRoot" BorderBrush="#99000000" Background="#99000000">
    ..........
            				</Border>
            			</ControlTemplate>
            		</Setter.Value>
            	</Setter>
            </Style>


    我是我,我非我。

    • Marked as answer by Xijian Yan Wednesday, September 3, 2014 2:05 AM
    Wednesday, September 3, 2014 2:04 AM
  • Thank you.But it didn't work eigher.And I think I solved the problem.There is a simple way.

    我是我,我非我。

    Wednesday, September 3, 2014 2:07 AM
  • Thank you.But it didn't work eigher.And I think I solved the problem.There is a simple way.

    我是我,我非我。

    Wednesday, September 3, 2014 2:07 AM