Question

希望你能帮我解决这个问题。我正在开发一个Windows通用应用程序（平板电脑应用程序），我在其中使用XAML Popups。当我使用＆＃34; popup.isOpen = true＆＃34;显示弹出窗口时我已设置弹出窗口的高度和宽度。问题是窗口上的其他控件也是可访问的。

当我显示弹出窗口时，我希望灰色显示实际窗口。当弹出窗口打开时，用户应该能够使用弹出窗口上的控件而不是实际窗口。

您的建议/指导将非常有用。

XAML

<Page
x:Name="PageName"
x:Class="TryingVariousThings.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TryingVariousThings"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <TextBlock Text="IsReadOnlyProperty Binding One" FontSize="29.333"></TextBlock>
    <TextBlock x:Name="tbkOne" Text="{Binding Text,ElementName=tbOne}" FontSize="29.333"></TextBlock>
        <TextBox x:Name="tbOne"  IsReadOnly="{Binding ElementName=PageName, Path=setAsReadOnly, Mode=OneWay}" />
        <Button Content="Disable editing" x:Name="bDisableEditing" Click="bDisableEditing_Click"></Button>
        <Button Content="Enable editing" x:Name="bEnableEditing" Click="bEnableEditing_Click"></Button>   
        <Button x:Name="bCustomPopup" Content="Show Custom Popup" Click="bCustomPopup_Click"></Button>
    </StackPanel>
    <Popup x:Name="PopupOne"
           IsOpen="False"
           >
        <Grid
            Background="Aqua"
            Width="800"
            Height="400">
        <Button Width="200" Content="popupButton"></Button>
        </Grid>
    </Popup>

</Grid>

XAML.cs

  private void bCustomPopup_Click(object sender, RoutedEventArgs e)
    {
        PopupOne.Height = 400;
        PopupOne.Width = 800;
        PopupOne.IsOpen = true;
    }

Answer 1

这是一种方法。

注意：我的建议是基于Windows 8.1 WinRT应用程序，而不是通用应用程序 - 如果事情最终有所不同我提前道歉，我只希望这会让你走上正轨。

首先，让你的弹出窗口跨越整个屏幕。请注意，我在代码隐藏中创建了弹出窗口。

        Popup popup = new Popup()
        {
            Height = Window.Current.Bounds.Height,
            IsLightDismissEnabled = false,
            Width = Window.Current.Bounds.Width
        };

        popup.SetValue(Canvas.LeftProperty, 0);
        popup.SetValue(Canvas.TopProperty, 0);

接下来，为内容创建<UserControl>，在XAML中创建如下内容：

<Grid>
    <Grid Background="Black" Opacity="0.4"/>

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="Auto">
        <!-- Make sure the set the height and width based on % or something, so it looks good -->
        <RestOfYourXAML/>
    </Grid>
</Grid>

这样你就可以覆盖＆＃34;整个屏幕（使其看起来被禁用的视觉效果）。

最后，指定弹出内容并显示它：

        MyUserControl popupContent = new MyUserControl();
        popup.Child = messageDialog;
        popup.IsOpen = true;

注意，我希望我的弹出窗口类似于系统弹出窗口，因此它们跨越可用屏幕的整个宽度，只有高度变化。您当然可以通过指定保存XAML中实际内容的<Grid>的宽度和高度来随意更改。

Answer 2

好的，这是我们在您的回答评论中讨论的解决方法的示例。如果有更好的方式会很高兴知道。

我们做的是：

将我们的容器IsHitTestVisible属性绑定到弹出窗口的IsOpen属性
将我们的可互动控件属性IsTabStop绑定到弹出窗口的IsOpen
使用反向bool转换器获取所需的值（与IsOpen相反）
拉伸Popup的第一个元素的大小，该元素是我们用来将暗色蒙版（暗色和不透明度）应用到curent窗口大小的边框（在后面的代码中完成）
单击弹出窗口中的按钮会关闭弹出窗口，所有内容都可见并且可以再次进行交互

<强> XAML

<Page.Resources>
    <local:BoolToOppositeConverter x:Name="OppositeBoolConverter" />
    <SolidColorBrush x:Key="GrayMaskColorBrush" Color="#88000000" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="container">
    <StackPanel 
        IsHitTestVisible="{Binding Path=IsOpen, ElementName=PopupOne, Converter={StaticResource OppositeBoolConverter}}">
        <TextBlock x:Name="tbkZero" Text="IsReadOnlyProperty Binding One" FontSize="29.333"></TextBlock>
        <TextBlock x:Name="tbkOne" Text="{Binding Text,ElementName=tbOne}" FontSize="29.333"></TextBlock>
        <TextBox x:Name="tbOne"  IsReadOnly="{Binding ElementName=PageName, Path=setAsReadOnly, Mode=OneWay}" 
                 IsTabStop="{Binding Path=IsOpen, ElementName=PopupOne,Converter={StaticResource OppositeBoolConverter}}"/>
        <Button Content="Disable editing" x:Name="bDisableEditing" Click="bDisableEditing_Click"
                IsTabStop="{Binding Path=IsOpen, ElementName=PopupOne, Converter={StaticResource OppositeBoolConverter}}"/>
        <Button Content="Enable editing" x:Name="bEnableEditing" Click="bEnableEditing_Click"
                IsTabStop="{Binding Path=IsOpen, ElementName=PopupOne, Converter={StaticResource OppositeBoolConverter}}"/>
        <Button x:Name="bCustomPopup" Content="Show Custom Popup" Click="bCustomPopup_Click"
                IsTabStop="{Binding Path=IsOpen, ElementName=PopupOne, Converter={StaticResource OppositeBoolConverter}}"/>
    </StackPanel>
    <Popup x:Name="PopupOne"
           IsOpen="False"
           IsLightDismissEnabled="False">
        <Border x:Name="popupMask" Background="{StaticResource GrayMaskColorBrush}">
            <Grid Background="White" Width="800" Height="400">
                <Button Width="200" Content="popupButton" Click="Button_Click"/>
            </Grid>
        </Border>
    </Popup>
</Grid>

主页 - 代码

public MainPage()
{
    this.InitializeComponent();
}

private void bCustomPopup_Click(object sender, RoutedEventArgs e)
{
    popupMask.Width = Window.Current.Bounds.Width;
    popupMask.Height = Window.Current.Bounds.Height;

    Window.Current.SizeChanged += Current_SizeChanged;

    PopupOne.IsOpen = true;
}

private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
    popupMask.Width = Window.Current.Bounds.Width;
    popupMask.Height = Window.Current.Bounds.Height;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    PopupOne.IsOpen = false;
    Window.Current.SizeChanged -= Current_SizeChanged;
}

针对相反布尔的转换器

class BoolToOppositeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return !(bool)value;
    }
}

修改窗口调整大小和使用新绑定时的修复{x：bind}

当您调整窗口大小时弹出窗口保持与最初相同的大小时出现问题，因此我在后面的代码中添加了一个修复程序，注册了更改事件的大小并再次调整窗口大小（您可以执行该部分在弹出窗口的打开和关闭事件中，如果您更喜欢而不是点击

同样在我们构建Universal应用程序时，你可以使用新的语法进行绑定（他们说它比旧的更快，但它默认为OneTime而不是OneWay所以我们必须设置手动模式）

"{x:Bind PopupOne.IsOpen, Converter={StaticResource OppositeBoolConverter}, Mode=OneWay}"

您可以使用此代替以前的绑定示例

Answer 3

正如Shaaman所说，并且在kirotab的帮助下，这是我的XAML和Xaml.cs灰色背景的Popup。弹出窗口设置为窗口宽度和高度，然后控件的堆栈面板居中。但唯一的问题是弹出窗口上的控件看起来也是灰色的。我能以任何方式反弹出弹出控件吗？

编辑：将OPACITY更改为0.9并修复了它。感谢SHAAMAN和KIROTAB帮助我

XAML

<Page
x:Name="PageName"
x:Class="TryingVariousThings.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TryingVariousThings"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel x:Name="spControls">

        <Button x:Name="bCustomPopup" Content="Show Custom Popup" Click="bCustomPopup_Click"></Button>


    </StackPanel>

        <Popup x:Name="PopupOne"
           IsOpen="{Binding ElementName=PageName, Path=setPopup, Mode=OneWay}">
        <Grid
            x:Name="gridPopupOne"
            Background="Black"
            Opacity="0.9">
                <StackPanel Orientation="Vertical"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                 <Button Content="Cancel Popup" x:Name="bCancelPopup" Click="bCancelPopup_Click"></Button>
                <TextBox Text="abcd"></TextBox>
                </StackPanel>
            </Grid>
    </Popup>

</Grid>

XAML.cs

private void bCustomPopup_Click(object sender, RoutedEventArgs e)
    {


        gridPopupOne.Height = Window.Current.Bounds.Height;
        gridPopupOne.Width = Window.Current.Bounds.Width;
        setPopup = true;
    }

    public static readonly DependencyProperty IsPopup = DependencyProperty.Register(
      "setPopup",
      typeof(bool),
      typeof(MainPage),
      new PropertyMetadata(false)
      );

    public bool setPopup
    {
        get { return (bool)GetValue(IsPopup); }
        set { SetValue(IsPopup, value); }

    }

    private void bCancelPopup_Click(object sender, RoutedEventArgs e)
    {
        setPopup = false;
    }

使窗口的其余部分变灰

3 个答案: