UWPのFlyoutのWidthのBinding

Question

前提

UWPのアプリを作っています。

実現したいこと

ButtonのFlyoutのWidthの値をほかのButtonのWidthと同じにしたいです。

該当のソースコード

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button x:Name="Button1" Grid.Row="0"/>
    <Button x:Name="Button2" Grid.Row="1">
        <Button.Flyout>
            <Flyout>
                <Grid Width="{Binding Width, ElementName=Button1}"> //ここ
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Button Content="Flyout1" Grid.Row="0"/>
                    <Button Content="Flyout2" Grid.Row="1"/>
                </Grid>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

試したこと

Width="{Binding ActualWidth, ElementName=Button1}"　や　FlyoutのWidthを "{Binding Width, ElementName=Button1}"　にしてみましたがFlyoutのWidthは変わりませんでした。ただし　Width=数値　の場合、Flyoutの横幅は変わりました。

Comments

[junyasu0124]

Bindingを使わなくてもFlyoutの横幅が変わるのならどんな方法でもいいです。

Answer 1

Flyoutの内と外ではXamlツリー構造が分けられているため{Binding Width, ElementName=Button1}等と記述してもFlyout内部から外部の要素に到達できずBindingも失敗しているはずです。

Bindingを強引に通す迂回方法を考える手もありますが、UWPアプリとしては「Flyoutの幅は親Button等の幅と一致していなくても構わない」とおそらく考えられているので、そのままでいいやと開き直ってしまうのが一番かなと思います。（ちなみに私もそうしてます。色んな端末の画面サイズで表示してみて、「テキストの見切れ」など表示上の問題が起きた際に調整する程度です。）

---

なお、Bindingを強引に通したところで今度は「ActualWidthがBinding出来ない問題」に突き当たります。

これは別途 Microsoft.Toolkit.Uwp パッケージにある FrameworkElementExtensions.EnableActualSizeBinding を利用することで迂回できます。（あくまで迂回なので常用すべきものではないと思います。レスポンシブ対応のためにどうしても必要といった時に使うイメージ。）

なお、Flyoutの使い勝手の調整として Flyout.Placement を適切に設定することでユーザーはアプリコンテンツを見渡しながらFlyout内の操作を選択できるようになりますので適宜設定することをオススメします。

Comments

[junyasu0124]

ありがとうございます。

Answer 2

先ほど書いたことは間違っていたみたいです