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

Question

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

    <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但仍然相同

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

Answer 1

当您绑定Flyout内容中的数据时，绑定源位于页面中，绑定目标位于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不会评估，Setter没有效果，你不会得到错误，但你不会得到所需的结果）。

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

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

然后将此属性绑定到Width的{​​{1}}：

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>

此处我只附加了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的{​​{1}}。