CODEWITHSUNDEEP
c#uwpuwp-xaml
Gencer TUTU
Gencer TUTU

Reputation: 35

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);



}

}

Upvotes: 0

Views: 212

Answers (1)

Xie Steven
Xie Steven

Reputation: 8591

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.

Upvotes: 1

Related Questions