如何在通用 Windows 商店应用程序中对按钮弹出进行相对绑定 [英] How to do relative binding for button flyout in universal windows store app

问题描述

我想将按钮弹出窗口的宽度和高度与其他一些控件绑定，但它不起作用

I want to bind my button flyout width and height with some other control but it not working

    <Grid >
        <Popup IsOpen="True" Name="popup">
            <Grid Name="popupBorder" Background="Red" Height="100" Width="100" >
            </Grid>
        </Popup>
        <Button Content="check flyout" Name="btn" Click="Button_Click" >
            <Button.Flyout>
                <Flyout>
                    <Border Name="flyoutBorder" Height="{Binding Path=Height, ElementName=popupBorder, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" 
Width="{Binding Path=Width, ElementName=popupBorder, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}">
                    </Border>
                </Flyout>
            </Button.Flyout>
        </Button>
    </Grid>

我也为按钮提供了数据上下文，但仍然相同

I have also given datacontext to button but still same

DataContext="{Binding ElementName=localContext, Mode=OneWay}"

推荐答案

在Flyout的内容中绑定数据时，绑定源在Page，绑定目标在PopupRoot，它们有不同的DataContext，所以不能在这里工作.

When you bind data in the content of Flyout, the binding source is in Page, and binding target is in PopupRoot, they have different DataContext, so can't it work here.

此外，一个Flyout控件是这样的:

Besides, a Flyout control is like this:

如果您将 Border 作为 Flyout 的内容放置，它将被放置在 ScrollContentPresenter 中:

If you place a Border as Content of Flyout, it will be placed in the ScrollContentPresenter:

如您所见，如果您设置内容的Width 和Height，它不会影响Flyout 的大小，因为那里里面是一个 ScrollViewer:ScrollViewer 的内容有无限的高度和宽度.

As you can see, if you set the Width and Height of content, it will not effect the size of the Flyout since there is a ScrollViewer inside it: ScrollViewer's content has unlimited height and width.

我想将按钮弹出窗口的宽度和高度与其他一些控件绑定，但它不起作用

I want to bind my button flyout width and height with some other control but it not working

因此，自定义 Flyout 大小的正确方法是设置 FlyoutPresenter 的样式，例如:

So, the right way to custom the size of Flyout is to style the FlyoutPresenter for example like this:

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="MinHeight" Value="100" />
            <Setter Property="MinWidth" Value="100" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
    <Border Name="flyoutBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    </Border>
</Flyout>

这里需要使用MinHeight和MinWidth来设置Flyout的大小，但是既然要绑定Width 和 Height 到其他一些控件，并且 Windows 运行时不支持 Setter.Value 的 Binding 用法(Binding 不会评估并且 Setter 具有没有效果，你不会得到错误，但你也不会得到想要的结果).

Here we need to use MinHeight and MinWidth to set the size of Flyout, but since you want to bind Width and Height to some other control, and the Windows Runtime doesn't support a Binding usage for Setter.Value (the Binding won't evaluate and the Setter has no effect, you won't get errors, but you won't get the desired result either).

通常当需要在Setter.Value中进行数据绑定时，我们可以创建一些附加的依赖属性.为了解决不同的 DataContext 问题，我们需要在代码隐藏或视图模型中定义属性，例如像这样:

Usually when need data binding in Setter.Value, we can create some attached dependency properties. And to solve the different DataContext problem, we need to define the property in code behind or view model for example like this:

public static double NewWidth { get; set; } = 100.0;

然后将this属性绑定到popupBorder的Width:

Then bind the this property to the Width of popupBorder:

<Grid>
    <Popup IsOpen="False" Name="popup">
        <Grid Name="popupBorder" Background="Red" Height="100" Width="{Binding NewWidth}">
        </Grid>
    </Popup>
    <Button Content="check flyout" Name="btn" Click="Button_Click" Foreground="Black">
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="local:BindingBuilder.FlyoutWidth" Value="400" /> <!--This value has no meaning here, you can set it to any value.-->
                        <Setter Property="MinHeight" Value="100" />
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Border Name="flyoutBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                </Border>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

要注册附加属性，您可以使用如下代码:

To register attached property, you can for example code like this:

public class BindingBuilder : DependencyObject
{
    public static readonly DependencyProperty FlyoutWidthProperty =
        DependencyProperty.RegisterAttached("FlyoutWidth", typeof(double), typeof(BindingBuilder), new PropertyMetadata(0, OnFlyoutWidthChanged));

    public static double GetFlyoutWidth(DependencyObject obj)
    {
        return (double)obj.GetValue(FlyoutWidthProperty);
    }

    public static void SetFlyoutWidth(DependencyObject obj, double value)
    {
        obj.SetValue(FlyoutWidthProperty, value);
    }

    public static void OnFlyoutWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        double newFlyoutWidth = (double)d.GetValue(FlyoutWidthProperty);
        var presenter = (FlyoutPresenter)d;
        presenter.MinWidth = MainPageViewModel.NewWidth;
    }
}

这里我只附上了MinWidth属性，你也可以用同样的方法自定义FlyoutPresenter的MinHeight.

Here I only attached the MinWidth property, you can also use the same method to custom the MinHeight of FlyoutPresenter.

这篇关于如何在通用 Windows 商店应用程序中对按钮弹出进行相对绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！