Using a VisualState to set the width of a RichEditBox to Auto (XAML, C#, Windows 8 App)

Question

I'm a beginner working a C# Windows 8 app. I have a RichEditBox in the center of the screen whose width changes depending on the window size. I can set the width of this RichEditBox to Auto by editing its own properties, but I want to set the width to Auto when the width of the window falls below a certain point. I'm using VisualStates to define the various screen options. The problem is that when I set the value to Auto, the app will crash when it tries to invoke the new VisualState.

My code is as follows:

    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FlexibleViewState">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Editor" Storyboard.TargetProperty="Width">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>

I don't know why it's doing this. I can do the following without any problems:

    <RichEditBox x:Name="Editor" Width="Auto"/>

But when I try to set the width to Auto with a VisualState it crashes. Is there any way to fix this or to work around this problem?

score 1 · Answer 1 · answered May 16 '15 at 09:46

The first thing to realize, is that the width Auto is represented as a NaN value. see MSDN for documentation on FrameworkElement.Width

With this in mind, you can set your (windows 8.1) style like this:

<VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="FlexibleViewState">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Editor" Storyboard.TargetProperty="Width">
                <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                         <x:Double>NaN</x:Double>
                     </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

If you are using a different flavour of XAML, you may need to use sys:Double instead of x:Double

Using a VisualState to set the width of a RichEditBox to Auto (XAML, C#, Windows 8 App)

1 Answers1