How to set ScrollViewer Width bound to a page element ActualWidth in AdaptiveTrigger UWP

Question

I have a ScrollViewer which Width property binds to another page element. I want to apply this only on certain AdaptiveTrigger MinWindowWidth

<ScrollViewer x:Name="scrollViewerEditor" Width="{Binding ElementName=stackPanelSearch, Path=ActualWidth}">
    ... 
</ScrollViewer>

I want to place the Width binding in AdaptiveTrigger like the following. What's the proper way to do it?

<VisualState x:Name="VisualStateWide">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="scrollViewerEditor.(FrameworkElement.Width)" Value="Binding ElementName=stackPanelSearch, Path=ActualWidth}" />

score 0 · Answer 1 · answered Sep 26 '16 at 11:05

If you don't mind to do this work in the code behind, there is an easy way to solve this problem, using the VisualStateGroup.CurrentStateChanged event for example like this:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup CurrentStateChanged="VisualStateGroup_CurrentStateChanged">
        <VisualState x:Name="VisualStateNarrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="scrollViewerEditor.Style" Value="{StaticResource ScrollViewerStyle1}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateWide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="scrollViewerEditor.Style" Value="{StaticResource ScrollViewerStyle2}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

In code behind:

private void VisualStateGroup_CurrentStateChanged(object sender, VisualStateChangedEventArgs e)
{
    var state = e.NewState;
    if (state.Name == "VisualStateNarrow")
    {
        scrollViewerEditor.Width = 300;
    }
    else
    {
        if (tb.ActualWidth != 0)
            scrollViewerEditor.Width = tb.ActualWidth;
        else
            scrollViewerEditor.Width = 600;
    }
}

It is not allowed to use data binding in Setter, usually the right way to solve this problem is to create a custom AttachedProperty for your ScrollViewer and bind this attached Property to the WidthProperty, but the support for custom attached property inside the VisualState is not quite ideal, I will keep researching on this and see if it works with custom AttachedProperty.

Would be ideal that binding would work in setters ( x:Bind for example ), ran in to this myself also — Depechie, Sep 27 '16 at 13:55
@Depechie, as I know, x:Bind also not work in setter, and I tried a lot, seems AttachedProperty here doesn't work fine... — Grace Feng, Sep 28 '16 at 01:55

How to set ScrollViewer Width bound to a page element ActualWidth in AdaptiveTrigger UWP

1 Answers1