VisualStateManager in Page.xaml that Consumes UserControl Not Working in UWP App

in my UWP app, in the code behind

VisualStateManager.GoToState(this,"Layout2",false);

returns false; when I use VisualStateManager xaml block in page.xaml that consume UserControl.

Here is what i mean. This is page.xaml which consumes User Control:

<local:MainUserControl x:Name="mainControl">

    <local:MainUserControl.QuestionContent>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="200"/>

                <RowDefinition Height="200"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="200"/>

                <ColumnDefinition Width="200"/>

            </Grid.ColumnDefinitions>



            <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

            <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>





            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup>

                    <VisualState x:Name="Layout1"/>

                    <VisualState x:Name="Layout2">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>



        </Grid>



    </local:MainUserControl.QuestionContent>

</local:MainUserControl>

From code, i am trying to change layout states. But unfortunately not able to do it.

I have also tried to sent "this.mainControl" instead of "this" but failed.

VisualStateManager.GoToState(this.mainControl,"Layout2",false)

And I have also checked my namespaces twice but couldn't managed to fix this issue.

Please take a note, when i remove

<local:MainUserControl x:Name="mainControl">

<local:MainUserControl.QuestionContent>

everything works as expected.

Any help will be appreciated.

Thanks.

Edit: Here is my MainUserControl.xaml

<UserControl

x:Class="MyProject.Pages.MainUserControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MyProject.Pages"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">





<Grid Background="#ededed">

    <Grid.RowDefinitions>

        <RowDefinition Height="227"/>

        <RowDefinition Height="625"/>

        <RowDefinition Height="227"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="692"/>

        <ColumnDefinition Width="1000"/>

        <ColumnDefinition Width="228"/>

    </Grid.ColumnDefinitions>



    <StackPanel Grid.Row="1" Grid.Column="1" Background="White" >



        <StackPanel x:Name="panelQuestion">

            <ContentPresenter Content="{x:Bind QuestionContent}"/>

        </StackPanel>



    </StackPanel>



</Grid>

And here is my MainUserControl.xaml.cs

namespace MyProject.Pages

{

public sealed partial class MainUserControl : UserControl

{



    public StackPanel cPanelQuestion;



    public MainUserControl()

    {

        this.InitializeComponent();

        cPanelQuestion = this.panelQuestion;



    }



    public object QuestionContent

    {

        get { return (object)GetValue(QuestionContentProperty); }

        set { SetValue(QuestionContentProperty, value); }

    }



    // Using a DependencyProperty as the backing store for Body.  This enables animation, styling, binding, etc...

    public static readonly DependencyProperty QuestionContentProperty =

        DependencyProperty.Register("QuestionContent", typeof(object), typeof(MainUserControl), null);







}

}

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

I need a Minimal, Complete, and Verifiable example to diagnose this issue. Or I at least need the way to implement your MainUserControl. Because I create a 'UserControl' and set the same content like your 'local:MainUserControl.QuestionContent', I called VisualStateManager.GoToState(this.mainControl,"Layout2",false) method successfully.

– Xavier Xie - MSFT
Nov 20 '18 at 5:54

@XavierXie-MSFT thanks for the reply. Please check updated part of the question. I just added UserControl stuff

– Gencer TUTU
Nov 20 '18 at 11:34

add a comment |

in my UWP app, in the code behind

VisualStateManager.GoToState(this,"Layout2",false);

returns false; when I use VisualStateManager xaml block in page.xaml that consume UserControl.

Here is what i mean. This is page.xaml which consumes User Control:

<local:MainUserControl x:Name="mainControl">

    <local:MainUserControl.QuestionContent>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="200"/>

                <RowDefinition Height="200"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="200"/>

                <ColumnDefinition Width="200"/>

            </Grid.ColumnDefinitions>



            <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

            <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>





            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup>

                    <VisualState x:Name="Layout1"/>

                    <VisualState x:Name="Layout2">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>



        </Grid>



    </local:MainUserControl.QuestionContent>

</local:MainUserControl>

From code, i am trying to change layout states. But unfortunately not able to do it.

I have also tried to sent "this.mainControl" instead of "this" but failed.

VisualStateManager.GoToState(this.mainControl,"Layout2",false)

And I have also checked my namespaces twice but couldn't managed to fix this issue.

Please take a note, when i remove

<local:MainUserControl x:Name="mainControl">

<local:MainUserControl.QuestionContent>

everything works as expected.

Any help will be appreciated.

Thanks.

Edit: Here is my MainUserControl.xaml

<UserControl

x:Class="MyProject.Pages.MainUserControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MyProject.Pages"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">





<Grid Background="#ededed">

    <Grid.RowDefinitions>

        <RowDefinition Height="227"/>

        <RowDefinition Height="625"/>

        <RowDefinition Height="227"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="692"/>

        <ColumnDefinition Width="1000"/>

        <ColumnDefinition Width="228"/>

    </Grid.ColumnDefinitions>



    <StackPanel Grid.Row="1" Grid.Column="1" Background="White" >



        <StackPanel x:Name="panelQuestion">

            <ContentPresenter Content="{x:Bind QuestionContent}"/>

        </StackPanel>



    </StackPanel>



</Grid>

And here is my MainUserControl.xaml.cs

namespace MyProject.Pages

{

public sealed partial class MainUserControl : UserControl

{



    public StackPanel cPanelQuestion;



    public MainUserControl()

    {

        this.InitializeComponent();

        cPanelQuestion = this.panelQuestion;



    }



    public object QuestionContent

    {

        get { return (object)GetValue(QuestionContentProperty); }

        set { SetValue(QuestionContentProperty, value); }

    }



    // Using a DependencyProperty as the backing store for Body.  This enables animation, styling, binding, etc...

    public static readonly DependencyProperty QuestionContentProperty =

        DependencyProperty.Register("QuestionContent", typeof(object), typeof(MainUserControl), null);







}

}

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

I need a Minimal, Complete, and Verifiable example to diagnose this issue. Or I at least need the way to implement your MainUserControl. Because I create a 'UserControl' and set the same content like your 'local:MainUserControl.QuestionContent', I called VisualStateManager.GoToState(this.mainControl,"Layout2",false) method successfully.

– Xavier Xie - MSFT
Nov 20 '18 at 5:54

@XavierXie-MSFT thanks for the reply. Please check updated part of the question. I just added UserControl stuff

– Gencer TUTU
Nov 20 '18 at 11:34

add a comment |

in my UWP app, in the code behind

VisualStateManager.GoToState(this,"Layout2",false);

returns false; when I use VisualStateManager xaml block in page.xaml that consume UserControl.

Here is what i mean. This is page.xaml which consumes User Control:

<local:MainUserControl x:Name="mainControl">

    <local:MainUserControl.QuestionContent>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="200"/>

                <RowDefinition Height="200"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="200"/>

                <ColumnDefinition Width="200"/>

            </Grid.ColumnDefinitions>



            <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

            <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>





            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup>

                    <VisualState x:Name="Layout1"/>

                    <VisualState x:Name="Layout2">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>



        </Grid>



    </local:MainUserControl.QuestionContent>

</local:MainUserControl>

From code, i am trying to change layout states. But unfortunately not able to do it.

I have also tried to sent "this.mainControl" instead of "this" but failed.

VisualStateManager.GoToState(this.mainControl,"Layout2",false)

And I have also checked my namespaces twice but couldn't managed to fix this issue.

Please take a note, when i remove

<local:MainUserControl x:Name="mainControl">

<local:MainUserControl.QuestionContent>

everything works as expected.

Any help will be appreciated.

Thanks.

Edit: Here is my MainUserControl.xaml

<UserControl

x:Class="MyProject.Pages.MainUserControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MyProject.Pages"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">





<Grid Background="#ededed">

    <Grid.RowDefinitions>

        <RowDefinition Height="227"/>

        <RowDefinition Height="625"/>

        <RowDefinition Height="227"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="692"/>

        <ColumnDefinition Width="1000"/>

        <ColumnDefinition Width="228"/>

    </Grid.ColumnDefinitions>



    <StackPanel Grid.Row="1" Grid.Column="1" Background="White" >



        <StackPanel x:Name="panelQuestion">

            <ContentPresenter Content="{x:Bind QuestionContent}"/>

        </StackPanel>



    </StackPanel>



</Grid>

And here is my MainUserControl.xaml.cs

namespace MyProject.Pages

{

public sealed partial class MainUserControl : UserControl

{



    public StackPanel cPanelQuestion;



    public MainUserControl()

    {

        this.InitializeComponent();

        cPanelQuestion = this.panelQuestion;



    }



    public object QuestionContent

    {

        get { return (object)GetValue(QuestionContentProperty); }

        set { SetValue(QuestionContentProperty, value); }

    }



    // Using a DependencyProperty as the backing store for Body.  This enables animation, styling, binding, etc...

    public static readonly DependencyProperty QuestionContentProperty =

        DependencyProperty.Register("QuestionContent", typeof(object), typeof(MainUserControl), null);







}

}

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

in my UWP app, in the code behind

VisualStateManager.GoToState(this,"Layout2",false);

returns false; when I use VisualStateManager xaml block in page.xaml that consume UserControl.

Here is what i mean. This is page.xaml which consumes User Control:

<local:MainUserControl x:Name="mainControl">

    <local:MainUserControl.QuestionContent>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="200"/>

                <RowDefinition Height="200"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="200"/>

                <ColumnDefinition Width="200"/>

            </Grid.ColumnDefinitions>



            <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

            <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>





            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup>

                    <VisualState x:Name="Layout1"/>

                    <VisualState x:Name="Layout2">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>



        </Grid>



    </local:MainUserControl.QuestionContent>

</local:MainUserControl>

From code, i am trying to change layout states. But unfortunately not able to do it.

I have also tried to sent "this.mainControl" instead of "this" but failed.

VisualStateManager.GoToState(this.mainControl,"Layout2",false)

And I have also checked my namespaces twice but couldn't managed to fix this issue.

Please take a note, when i remove

<local:MainUserControl x:Name="mainControl">

<local:MainUserControl.QuestionContent>

everything works as expected.

Any help will be appreciated.

Thanks.

Edit: Here is my MainUserControl.xaml

<UserControl

x:Class="MyProject.Pages.MainUserControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MyProject.Pages"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">





<Grid Background="#ededed">

    <Grid.RowDefinitions>

        <RowDefinition Height="227"/>

        <RowDefinition Height="625"/>

        <RowDefinition Height="227"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="692"/>

        <ColumnDefinition Width="1000"/>

        <ColumnDefinition Width="228"/>

    </Grid.ColumnDefinitions>



    <StackPanel Grid.Row="1" Grid.Column="1" Background="White" >



        <StackPanel x:Name="panelQuestion">

            <ContentPresenter Content="{x:Bind QuestionContent}"/>

        </StackPanel>



    </StackPanel>



</Grid>

And here is my MainUserControl.xaml.cs

namespace MyProject.Pages

{

public sealed partial class MainUserControl : UserControl

{



    public StackPanel cPanelQuestion;



    public MainUserControl()

    {

        this.InitializeComponent();

        cPanelQuestion = this.panelQuestion;



    }



    public object QuestionContent

    {

        get { return (object)GetValue(QuestionContentProperty); }

        set { SetValue(QuestionContentProperty, value); }

    }



    // Using a DependencyProperty as the backing store for Body.  This enables animation, styling, binding, etc...

    public static readonly DependencyProperty QuestionContentProperty =

        DependencyProperty.Register("QuestionContent", typeof(object), typeof(MainUserControl), null);







}

}

c# uwp uwp-xaml

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

edited Nov 20 '18 at 11:31

asked Nov 19 '18 at 13:59

Gencer TUTU

205

asked Nov 19 '18 at 13:59

Gencer TUTU

205

asked Nov 19 '18 at 13:59

Gencer TUTU

205

I need a Minimal, Complete, and Verifiable example to diagnose this issue. Or I at least need the way to implement your MainUserControl. Because I create a 'UserControl' and set the same content like your 'local:MainUserControl.QuestionContent', I called VisualStateManager.GoToState(this.mainControl,"Layout2",false) method successfully.

– Xavier Xie - MSFT
Nov 20 '18 at 5:54

@XavierXie-MSFT thanks for the reply. Please check updated part of the question. I just added UserControl stuff

– Gencer TUTU
Nov 20 '18 at 11:34

add a comment |

I need a Minimal, Complete, and Verifiable example to diagnose this issue. Or I at least need the way to implement your MainUserControl. Because I create a 'UserControl' and set the same content like your 'local:MainUserControl.QuestionContent', I called VisualStateManager.GoToState(this.mainControl,"Layout2",false) method successfully.

– Xavier Xie - MSFT
Nov 20 '18 at 5:54

@XavierXie-MSFT thanks for the reply. Please check updated part of the question. I just added UserControl stuff

– Gencer TUTU
Nov 20 '18 at 11:34

I need a Minimal, Complete, and Verifiable example to diagnose this issue. Or I at least need the way to implement your MainUserControl. Because I create a 'UserControl' and set the same content like your 'local:MainUserControl.QuestionContent', I called VisualStateManager.GoToState(this.mainControl,"Layout2",false) method successfully.

– Xavier Xie - MSFT
Nov 20 '18 at 5:54

@XavierXie-MSFT thanks for the reply. Please check updated part of the question. I just added UserControl stuff

– Gencer TUTU
Nov 20 '18 at 11:34

add a comment |

1 Answer
1

active

oldest

votes

You need to put the VisualStateManager.VisualStateGroups as the root panel Grid's immediate child tag like the following:

<Grid>

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Layout1"/>

            <VisualState x:Name="Layout2">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <local:MainUserControl x:Name="mainControl">

        <local:MainUserControl.QuestionContent>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="200"/>

                    <RowDefinition Height="200"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="200"/>

                </Grid.ColumnDefinitions>

                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

            </Grid>

        </local:MainUserControl.QuestionContent>

    </local:MainUserControl>

</Grid>

Then, in this XAML page's code-behind, you could call VisualStateManager.GoToState(this, "Layout2", false); to change the visual state.

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376262%2fvisualstatemanager-in-page-xaml-that-consumes-usercontrol-not-working-in-uwp-app%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to put the VisualStateManager.VisualStateGroups as the root panel Grid's immediate child tag like the following:

<Grid>

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Layout1"/>

            <VisualState x:Name="Layout2">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <local:MainUserControl x:Name="mainControl">

        <local:MainUserControl.QuestionContent>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="200"/>

                    <RowDefinition Height="200"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="200"/>

                </Grid.ColumnDefinitions>

                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

            </Grid>

        </local:MainUserControl.QuestionContent>

    </local:MainUserControl>

</Grid>

Then, in this XAML page's code-behind, you could call VisualStateManager.GoToState(this, "Layout2", false); to change the visual state.

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

add a comment |

You need to put the VisualStateManager.VisualStateGroups as the root panel Grid's immediate child tag like the following:

<Grid>

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Layout1"/>

            <VisualState x:Name="Layout2">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <local:MainUserControl x:Name="mainControl">

        <local:MainUserControl.QuestionContent>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="200"/>

                    <RowDefinition Height="200"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="200"/>

                </Grid.ColumnDefinitions>

                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

            </Grid>

        </local:MainUserControl.QuestionContent>

    </local:MainUserControl>

</Grid>

Then, in this XAML page's code-behind, you could call VisualStateManager.GoToState(this, "Layout2", false); to change the visual state.

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

add a comment |

You need to put the VisualStateManager.VisualStateGroups as the root panel Grid's immediate child tag like the following:

<Grid>

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Layout1"/>

            <VisualState x:Name="Layout2">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <local:MainUserControl x:Name="mainControl">

        <local:MainUserControl.QuestionContent>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="200"/>

                    <RowDefinition Height="200"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="200"/>

                </Grid.ColumnDefinitions>

                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

            </Grid>

        </local:MainUserControl.QuestionContent>

    </local:MainUserControl>

</Grid>

Then, in this XAML page's code-behind, you could call VisualStateManager.GoToState(this, "Layout2", false); to change the visual state.

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

You need to put the VisualStateManager.VisualStateGroups as the root panel Grid's immediate child tag like the following:

<Grid>

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Layout1"/>

            <VisualState x:Name="Layout2">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <local:MainUserControl x:Name="mainControl">

        <local:MainUserControl.QuestionContent>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="200"/>

                    <RowDefinition Height="200"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="200"/>

                </Grid.ColumnDefinitions>

                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>

                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

            </Grid>

        </local:MainUserControl.QuestionContent>

    </local:MainUserControl>

</Grid>

Then, in this XAML page's code-behind, you could call VisualStateManager.GoToState(this, "Layout2", false); to change the visual state.

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

answered Nov 22 '18 at 9:42

Xavier Xie - MSFT

5,1561315

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

add a comment |

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

Thank you very much, now it works like a charm!

– Gencer TUTU
Nov 23 '18 at 11:08

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk