locked
Page element's opacity only applied after page transition animation RRS feed

  • Question

  • I have a simple Grid application which loads a page. On that page I added an element whose opacity I set to 50%. When I run the app, there is the standard entrance animation which animates the page elements from the right to the left. However, the element whose opacity I set to 50% will be shown at 100% for the entire duration of the entrance animation. Only when the entrance animation ends will the opacity of that element be set to 50%. Why is that and how can I change the behavior so that when the element appears at 50% opacity right away?

    Maybe this is a no-brainer, but I still didn't find the answer for it. Maybe I'm just not using the correct search terms...

    Thanks.

    Wednesday, January 23, 2013 7:38 PM

Answers

  • A possible workaround consists in setting/controlling the parent container Opacity. It might come at the expense of creating [e.g.] a ContentControl for that sole purpose:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <ContentControl Opacity="0.5">
                <Button Width="100" Height="100" Background="Red">
                    <Button.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition FromHorizontalOffset="800"/>
                        </TransitionCollection>
                    </Button.Transitions>
                </Button>
            </ContentControl>
        </Grid>

    • Marked as answer by Jesse Jiang Monday, January 28, 2013 6:59 AM
    Thursday, January 24, 2013 8:28 AM
  • You can also try setting the opacity of the Background Brush instead of the control itself if you don't mind that objects on top of the background are opaque.


    <Grid>
        <Grid.Background>
              <SolidColorBrush Color="#000000" Opacity="0.6" />
        </Grid.Background>
    </Grid>
    • Edited by NelsonCarrillo Friday, January 25, 2013 12:14 AM
    • Marked as answer by Jesse Jiang Monday, January 28, 2013 6:59 AM
    Friday, January 25, 2013 12:13 AM

All replies

  • A possible workaround consists in setting/controlling the parent container Opacity. It might come at the expense of creating [e.g.] a ContentControl for that sole purpose:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <ContentControl Opacity="0.5">
                <Button Width="100" Height="100" Background="Red">
                    <Button.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition FromHorizontalOffset="800"/>
                        </TransitionCollection>
                    </Button.Transitions>
                </Button>
            </ContentControl>
        </Grid>

    • Marked as answer by Jesse Jiang Monday, January 28, 2013 6:59 AM
    Thursday, January 24, 2013 8:28 AM
  • You can also try setting the opacity of the Background Brush instead of the control itself if you don't mind that objects on top of the background are opaque.


    <Grid>
        <Grid.Background>
              <SolidColorBrush Color="#000000" Opacity="0.6" />
        </Grid.Background>
    </Grid>
    • Edited by NelsonCarrillo Friday, January 25, 2013 12:14 AM
    • Marked as answer by Jesse Jiang Monday, January 28, 2013 6:59 AM
    Friday, January 25, 2013 12:13 AM
  • Hi,

    I marked these replies as answer, if your issue has not been solved please unmark it and update more information about this issue.

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, January 28, 2013 7:00 AM
  • Thanks for your suggestions guys! I will try them out and see which one works best for me.
    Monday, January 28, 2013 2:05 PM