Storyboard applied to a dashboard c# mvvm uwp

Javier R 211

I have this code to open and close Panel with StoryBoard how I can implement it in the ViewModel. c# UWP

 public void OpenAndClose()  
        {  
            if(SlidePanel.Translate)  
            {  
                ShowPanel.Begin();  
            }  
  
            if(SlidePanel.TranslateX == 0)  
            {  
                HidePanel.Begin();  
            }  
        }

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-07T03:11:02.353+00:00

Could you please be more specific about your scenario? It seems that you are trying to access the StoryBoard animation from the ViewModel, right? If it is, you could take a look at Xavier's answer here: How do you trigger a VisualState Storyboard animation from the ViewModel.
Javier R 211 Reputation points

2022-11-09T08:14:21.197+00:00

It is a side panel with a button to open and close the side panel where several options will go
Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-10T09:43:00.977+00:00

Could you please share more code snippet about the thing that you are having? Please refer to this- How to write a quality question and add more details to your question like the code that could reproduce the behavior. This could help us understand your question better.

Also, have you checked the link that I shared to see if the solution works for your scenario?

Javier R 211

<Grid Grid.Column="0" x:Name="GridTranslate"  Width="300"  Background="#fafcfd"  HorizontalAlignment="Left">  
  
                <Grid.RenderTransform>  
                    <CompositeTransform  x:Name="SlidePanel" TranslateX="-300"/>  
                </Grid.RenderTransform>  
                <Grid.Resources>  
                    <Storyboard x:Name="ShowPanel">  
                        <DoubleAnimation    From="-300" To="0"  Duration="00:00:0.3"  Storyboard.TargetName="SlidePanel"  Storyboard.TargetProperty="TranslateX"/>  
                    </Storyboard>  
                    <Storyboard x:Name="HidePanel">  
                        <DoubleAnimation    From="0" To="-300"  Duration="00:00:0.3"  Storyboard.TargetName="SlidePanel"  Storyboard.TargetProperty="TranslateX"/>  
                    </Storyboard>  
  
                </Grid.Resources>  
  
                <AppBarButton  Margin="277,11,0,0"   Style="{StaticResource ButtonStyle}">  
  
                    <AppBarButton.Icon>  
                        <FontIcon Glyph="&#xe76c;" FontFamily="Segoe Fluent Icons" FontSize="10"/>  
                    </AppBarButton.Icon>  
  
                </AppBarButton>

</Grid>

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-14T06:11:35.147+00:00

@Javier R You could take a look at @Nico 's answer which already provides a soution for this.

1 answer

Nico 106 Reputation points

2022-11-11T05:49:30.117+00:00

Hi, Welcome to Microsoft QA

The better way is that create a such IsOpen Dependency property for your side-panel, then binding it with a bool property where in the viewmodel, when you update this bool poperty, it will start different animation. For checking the samilar solution please refer to this case reply

Thanks
vzhumin
Please sign in to rate this answer.
Javier R 211 Reputation points

2022-11-15T18:25:41.86+00:00

If I use IsOpen as I can apply it to the code that I have

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-16T07:56:15.937+00:00

@Javier R I can't understand you very well. Generally speaking, you don't need to have extra OpenAndClose method once you take @Nico 's solution.

Javier R 211 Reputation points

2022-11-19T17:51:50.897+00:00

I'm having trouble declaring the name in the current context.

private void OpenandClose() { if (SlidePanel.TranslateX == -300) { ShowPanel.Begin(); } if (SlidePanel.TranslateX == 0) { HidePanel.Begin(); } }

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-21T02:04:58.96+00:00

@Javier R Could you please be more specific about declaring the name in the current context? What do you want to get?

Javier R 211 Reputation points

2022-11-23T18:43:12.847+00:00

The name does not exist in context. This message comes out in the viwemodel,

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-24T10:15:31.113+00:00

You need to modify @Nico 's solution to fit your real scenario like change the name to the name that you are using. Also, it's better to share more details about your real scenario. Please refer to this link：How to write a quality question.

Javier R 211 Reputation points

2022-11-24T19:04:47.883+00:00

Example of code is published in this post at the beginning.

where the names in the parentheses are those found on the StoryBoard. The error it indicates is " The name "SlidePanel" does not exist in the current context.

this message appears in the ViewModel.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-11-25T01:58:05.427+00:00

@Javier R As I mentioned, you can't directly use @Nico 's solution because the code is not built for your real scenario but for another question. But the mechanism is the same. You need to change it to fix your own scenario.
Sign in to comment

Share via

Storyboard applied to a dashboard c# mvvm uwp

1 answer