Как обернуть OffContent/OnContent ToggleSwitch в UWP?

В стиле ToggleSwitch OffContentPresenter и OnContentPresenter представляют OffContent и OnContent, вы можете добавить TextWrapping для переноса содержимого и установить ширину, чтобы ограничить его ширину. Что касается полного стиля, вы можете перейти к generic.xaml, чтобы скопировать его.

.xaml:

       <Style x:Key="ToggleSwitchStyle1" TargetType="ToggleSwitch">
            ......
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleSwitch">
                        <Grid Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                ......
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="HeaderContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ToggleSwitchHeaderForeground}" IsHitTestVisible="False" Margin="{ThemeResource ToggleSwitchTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                            <Grid HorizontalAlignment="Left" MinWidth="{StaticResource ToggleSwitchThemeMinWidth}" Grid.Row="1" VerticalAlignment="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition MaxWidth="12" Width="12"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{ThemeResource ToggleSwitchPreContentMargin}"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="{ThemeResource ToggleSwitchPostContentMargin}"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="SwitchAreaGrid" Background="{ThemeResource ToggleSwitchContainerBackground}" Grid.ColumnSpan="3" Control.IsTemplateFocusTarget="True" Margin="0,5" Grid.RowSpan="3"/>
                                <ContentPresenter TextWrapping="Wrap" Width="100" x:Name="OffContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" Grid.Column="2" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <ContentPresenter TextWrapping="Wrap" Width="100" x:Name="OnContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" Grid.Column="2" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                ......

                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Или вы также можете поместить TextBlock в свойства OnContent и OffContent ToggleSwitch, чтобы добиться этого.

<ToggleSwitch Width="200" Grid.Row="2" Grid.Column="0" x:Name="SomeToggle" 
              Header="Some header" >
    <ToggleSwitch.OffContent>
        <TextBlock Width="100" TextWrapping="Wrap">Off content to verify if string is wrapped</TextBlock>
    </ToggleSwitch.OffContent>
</ToggleSwitch>

Обновление:

Если вы не хотите, чтобы Width ограничивала ширину напрямую, вы можете изменить ColumnDefinition с «Auto» на «*». «Авто» означает, что столбцу дается такая ширина, какая требуется элементам внутри него. Но «*» основан на ширине оставшегося пространства. Поэтому, когда вы устанавливаете ColumnDefinition на « * », он размещает ваш текст в соответствии с оставшимся пространством и переносит его, если его недостаточно.

Часть стиля, которую необходимо изменить (вам просто нужно изменить следующую часть исходного стиля):

<Grid HorizontalAlignment="Left" MinWidth="{StaticResource ToggleSwitchThemeMinWidth}" Grid.Row="1" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition MaxWidth="12" Width="12"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    ......
</Grid>

Использование:

<ToggleSwitch
    Grid.Row="2"
    Grid.Column="0"
    x:Name="SomeToggle"
    Header="Some header"
    OffContent="Off content to verify if string is wrapped"
    OnContent="On content to verify if string is wrapped"
    OffContentTemplate="{StaticResource ToggleSwitchTextBlockTemplate}"
    OnContentTemplate="{StaticResource ToggleSwitchTextBlockTemplate}"
    Style="{StaticResource ToggleSwitchStyle1}"
    Width="200" />

Я сделал все, что предложил Файванг, но безрезультатно. Я заметил, когда я устанавливаю OffContent напрямую (вместо определения шаблона) и проверяю свойства элементов

        <ToggleSwitch
            Grid.Row="2"
            Grid.Column="0"
            x:Name="SomeToggle"
            Header="Some header"
            HeaderTemplate="{StaticResource ToggleSwitchTextBlockTemplate}"
            OnContent="On content to verify if string is wrapped"
            OnContentTemplate="{StaticResource ToggleSwitchTextBlockTemplate}"
            Width="200">
            <ToggleSwitch.OffContent>
                <TextBlock
                    Width="Auto"
                    TextWrapping="Wrap"
                    Text="Off content to verify if string is wrapped" />
            </ToggleSwitch.OffContent>
        </ToggleSwitch>

Ширина ToggleSwitch — 200. Но ширина TextBlock OffContent — «Auto (246.224)». Как и в моем примере, где он простирается далеко за пределы родительского элемента. В результате он не будет обернут, как ожидалось.

На мой взгляд, это ошибка в поведении ToggleSwitch. Предполагается, что ToggleSwitch упорядочивает расположение своих дочерних элементов. Скажем, если ширина элемента ToggleSwitch равна 200, укажите 40 для Toggle и 160 для OffContent/OnContent. Это всего лишь теория того, как это реализовано, а не реальные цифры. Поскольку OffContent/OnContent почти всегда представляет собой одно короткое слово (либо «Off/On», либо «No/Yes») и не занимает несколько строк, Microsoft никогда не тестировала этот тестовый пример.