如何在通用 Windows 商店应用程序中对按钮弹出进行相对绑定答案

【问题标题】：How to do relative binding for button flyout in universal windows store app如何在通用 Windows 商店应用程序中对按钮弹出进行相对绑定
【发布时间】：2016-08-18 10:50:22
【问题描述】：

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

    <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>

我也给按钮提供了数据上下文，但还是一样

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

【问题讨论】：

请注意，设置UpdateSourceTrigger=PropertyChanged 在单向绑定中无效。指定Mode=OneWay 也是多余的，因为无论如何这都是默认值。除此之外，您是否尝试过绑定到 popupBorder 的 ActualWidth 和 ActualHeight？
是的，我也试过了，我必须绑定它，但那不起作用，这就是为什么我首先想到绑定宽度和高度
localContext 这里是页面的名称。名称="localContext"。

标签： xaml data-binding windows-store-apps uwp windows-10-universal

【解决方案1】：

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

另外，Flyout 控件是这样的：

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

如你所见，如果你设置了Width和Height的内容，它不会影响Flyout的大小，因为里面有一个ScrollViewer：ScrollViewer的内容有无限的高度和宽度。

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

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

<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 没有效果，你不会得到错误，但你也不会得到想要的结果）。

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

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

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

<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>

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

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。

【讨论】：