Ширина HubSection по умолчанию в UWP

Я переношу приложение Wp81 в UWP, и кажется, что стратегия макета Hub изменилась, и он больше не адаптирует ширину HubSections, чтобы растянуть ее (почти) до ширины экрана. Как я могу добиться этого в UWP, не устанавливая абсолютную ширину для HubSections?

Подробности о моем варианте использования: в моем HubSection у меня есть изображение, которое вместо того, чтобы сжиматься до ширины экрана (почти так, чтобы был виден следующий раздел), растягивается до исходной ширины. То же самое происходит с TextBlock. Кажется, что в UWP HubSection не установлены Width или MaxWith в соответствии с шириной экрана.


xaml uwp windows-10-mobile
person bitninja    schedule 02.11.2015    source источник
comment
Вы пытались проверить/изменить стиль вашего элемента управления?   -  person Romasz    schedule 02.11.2015
comment
@Romasz Да, и в стиле Hub или в стиле HubSection нет явных настроек ширины.   -  person bitninja    schedule 02.11.2015

Ответы (1)


arrow_upward
0
arrow_downward

Цель концентратора — позволить пользователю находить что-то. Таким образом, раздел по умолчанию не растягивается на весь экран. В вашем случае лучше попробовать Pivot control. здесь — это руководство по проектированию для Pivot и Hub.

Кроме того, если вы все еще хотите использовать Hub и хотите, чтобы стиль адаптировался к разным размерам экрана, ниже приведено простое решение VisualStateManager:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Phone" >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HeroImg.Width" Value="100" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tablet" >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HeroImg.Width" Value="800" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Hub Header="News" >
        <HubSection  Header="Hero"  x:Name ="HeroImg" >
            <HubSection.Background>
                <ImageBrush   ImageSource="Assets/circle_hero.jpg" Stretch="UniformToFill"/>
            </HubSection.Background>
        </HubSection>

    </Hub>
</Grid>
person Fangfang Wu - MSFT    schedule 02.11.2015
comment
Мой вариант использования соответствует рекомендациям по проектированию Hub. По крайней мере, давайте предположим, что это так. Я добавил подробную информацию к вопросу о том, чего я хочу достичь. - person bitninja; 02.11.2015
comment
HubSection имеет свойства Width, MinWidth MaxWidth. Вы можете проверить здесь: msdn.microsoft.com/query/ - person Fangfang Wu - MSFT; 03.11.2015
comment
Если вы хотите адаптироваться к размеру экрана, вы можете использовать VisualStateGroups. Вы можете обратиться к сценарию 2 в этом примере: code.msdn.microsoft.com /XAML-Hub-control-sample-5d116fa9 - person Fangfang Wu - MSFT; 03.11.2015
comment
Спасибо за образец, но он предназначен для Windows 8.1, а не для телефона, и в этом сценарии главное изображение (и HubSection) адаптируется к высоте экрана, а не ширине. - person bitninja; 03.11.2015
comment
Я отредактировал свой первый ответ с подробным образцом. Пожалуйста, дайте мне знать, если что-то непонятно. Я тестировал в своем приложении UWP. - person Fangfang Wu - MSFT; 04.11.2015
comment
Я не хотел использовать AdaptiveTrigger, так как он на самом деле явно устанавливает размер, но для этого сценария это кажется самым простым и гибким решением. Я предполагаю, что для достижения именно того, что я хотел, мне нужно было бы написать поведение для HubSection, которое устанавливало бы его ширину в соответствии с шириной экрана. - person bitninja; 04.11.2015