Windows 10 Mobile (UWP) 上的 ContentDialog 宽度适配
ContentDialog Width Fitting on Windows 10 Mobile (UWP)
我在 Windows 10 移动设备上为 UWP 创建了一个内容对话框。 Fit 在 320 x 480 分辨率的 4" 模拟器上运行完美。但是,当我选择 5" 720p 模拟器时,左右两侧会出现间隙。我找不到确切的解决方案。有人遇到过这个问题吗?谢谢
ContentDialog 的 XAML 在这里:
<ContentDialog x:Name="ContDial"
x:Class="TripLog.UserControls.AddStory"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TripLog.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Share Story"
PrimaryButtonText="Share"
SecondaryButtonText="Cancel"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Loading="ContentDialog_Loading" Loaded="ContentDialog_Loaded" Closed="ContentDialog_Closed" Closing="ContentDialog_Closing" RequestedTheme="Light" FontSize="16" MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" MinWidth="500" FullSizeDesired="True">
<Grid x:Name="Main" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="58"/>
<RowDefinition/>
<RowDefinition Height="76"/>
</Grid.RowDefinitions>
<TextBox x:Name="Title_TextBox" Text="" Margin="10,10,10,0" PlaceholderText="Please enter your story title..." RequestedTheme="Light" FontSize="16" MaxLength="50" Grid.Row="1" BorderBrush="{StaticResource TextColor}"/>
<TextBox x:Name="Experience_Text" Text="" Grid.Row="2" Margin="10,10,10,0" PlaceholderText="Please tell your experience..." MaxLength="500" TextChanged="Experience_Text_TextChanged" FontSize="16" TextWrapping="Wrap" MinHeight="42" AcceptsReturn="True" RequestedTheme="Light" ScrollViewer.VerticalScrollBarVisibility="Auto" VerticalAlignment="Center" Height="190" BorderBrush="{StaticResource TextColor}"/>
<Grid x:Name="CharacterGrid" Grid.Row="3" Margin="10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="CharacterLeft" Margin="0" TextWrapping="Wrap" Text="" TextAlignment="Right" FontSize="16" Grid.Column="2" VerticalAlignment="Top" RequestedTheme="Light" Foreground="{StaticResource TextColor}"/>
<Button x:Name="CameraButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" VerticalAlignment="Top" Margin="0,5,0,0" HorizontalAlignment="Left" Foreground="{StaticResource TextColor}" FontSize="21.333" RequestedTheme="Light" Width="48" Height="48"/>
</Grid>
<Grid x:Name="LocationGrid" Margin="10,10,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="48"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="LocText" Margin="0" TextWrapping="Wrap" Text="Location will be here...." FontSize="16" VerticalAlignment="Center" RequestedTheme="Light" Foreground="{StaticResource TextColor}" TextAlignment="Center"/>
<Button x:Name="LocationButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Right" Foreground="{StaticResource TextColor}" FontSize="21.333" RequestedTheme="Light" Width="48" Height="48" Grid.Column="1"/>
</Grid>
</Grid>
</ContentDialog>
这是图片:
在后面的代码中将 MinWidth 和 MaxWidth 设置为页面的 ActualWidth 以确保它适合屏幕。
例如,如果您在页面上单击按钮显示对话框。以下代码应该有效:
private async void Button_Click(object sender, RoutedEventArgs e)
{
CustomContentDialog contentDialog = new CustomContentDialog();
contentDialog.MinWidth = this.ActualWidth;
contentDialog.MaxWidth = this.ActualWidth;
ContentDialogResult result = await contentDialog.ShowAsync();
}
我在 Windows 10 移动设备上为 UWP 创建了一个内容对话框。 Fit 在 320 x 480 分辨率的 4" 模拟器上运行完美。但是,当我选择 5" 720p 模拟器时,左右两侧会出现间隙。我找不到确切的解决方案。有人遇到过这个问题吗?谢谢
ContentDialog 的 XAML 在这里:
<ContentDialog x:Name="ContDial"
x:Class="TripLog.UserControls.AddStory"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TripLog.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Share Story"
PrimaryButtonText="Share"
SecondaryButtonText="Cancel"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Loading="ContentDialog_Loading" Loaded="ContentDialog_Loaded" Closed="ContentDialog_Closed" Closing="ContentDialog_Closing" RequestedTheme="Light" FontSize="16" MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" MinWidth="500" FullSizeDesired="True">
<Grid x:Name="Main" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="58"/>
<RowDefinition/>
<RowDefinition Height="76"/>
</Grid.RowDefinitions>
<TextBox x:Name="Title_TextBox" Text="" Margin="10,10,10,0" PlaceholderText="Please enter your story title..." RequestedTheme="Light" FontSize="16" MaxLength="50" Grid.Row="1" BorderBrush="{StaticResource TextColor}"/>
<TextBox x:Name="Experience_Text" Text="" Grid.Row="2" Margin="10,10,10,0" PlaceholderText="Please tell your experience..." MaxLength="500" TextChanged="Experience_Text_TextChanged" FontSize="16" TextWrapping="Wrap" MinHeight="42" AcceptsReturn="True" RequestedTheme="Light" ScrollViewer.VerticalScrollBarVisibility="Auto" VerticalAlignment="Center" Height="190" BorderBrush="{StaticResource TextColor}"/>
<Grid x:Name="CharacterGrid" Grid.Row="3" Margin="10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="CharacterLeft" Margin="0" TextWrapping="Wrap" Text="" TextAlignment="Right" FontSize="16" Grid.Column="2" VerticalAlignment="Top" RequestedTheme="Light" Foreground="{StaticResource TextColor}"/>
<Button x:Name="CameraButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" VerticalAlignment="Top" Margin="0,5,0,0" HorizontalAlignment="Left" Foreground="{StaticResource TextColor}" FontSize="21.333" RequestedTheme="Light" Width="48" Height="48"/>
</Grid>
<Grid x:Name="LocationGrid" Margin="10,10,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="48"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="LocText" Margin="0" TextWrapping="Wrap" Text="Location will be here...." FontSize="16" VerticalAlignment="Center" RequestedTheme="Light" Foreground="{StaticResource TextColor}" TextAlignment="Center"/>
<Button x:Name="LocationButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Right" Foreground="{StaticResource TextColor}" FontSize="21.333" RequestedTheme="Light" Width="48" Height="48" Grid.Column="1"/>
</Grid>
</Grid>
</ContentDialog>
这是图片:
在后面的代码中将 MinWidth 和 MaxWidth 设置为页面的 ActualWidth 以确保它适合屏幕。
例如,如果您在页面上单击按钮显示对话框。以下代码应该有效:
private async void Button_Click(object sender, RoutedEventArgs e)
{
CustomContentDialog contentDialog = new CustomContentDialog();
contentDialog.MinWidth = this.ActualWidth;
contentDialog.MaxWidth = this.ActualWidth;
ContentDialogResult result = await contentDialog.ShowAsync();
}