質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

解決済

WPFで、Widthプロパティのアニメーション幅を自動計算したい

tails
tails

総合スコア22

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

1回答

0評価

1クリップ

804閲覧

投稿2021/11/26 15:56

実現出来ていること

XAMLのみを用いて、画像のようなアニメーションをするサイドメニューを作りました。
緑の丸と紫の丸は、今はただの円ですが、メニューアイコンにする予定です。(つまり Image 要素)
画像のすぐ下にソースコードも載せます。
サイドメニューのアニメーションの様子

XAML

<Window x:Class="SideBar.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SideBar" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <DockPanel> <StackPanel DockPanel.Dock="Left" Width="53" Background="DarkGray"> <StackPanel.Triggers> <EventTrigger RoutedEvent="MouseEnter" SourceName="side_menu_panel"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" From="{Binding Path=Width, RelativeSource={RelativeSource Self}}" To="145" Duration="0:0:0.25" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave" SourceName="side_menu_panel"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" From="{Binding Path=Width, RelativeSource={RelativeSource Self}}" To="53" Duration="0:0:0.25" /> </Storyboard> </BeginStoryboard> </EventTrigger> </StackPanel.Triggers> <StackPanel.Resources> <Style TargetType="RadioButton"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Padding" Value="4" /> <Setter Property="VerticalContentAlignment" Value="Center" /> </Style> <Style TargetType="ContentPresenter" x:Key="MarginLeft"> <Setter Property="Margin" Value="20,0,0,0" /> <!--<Setter Property="Visibility" Value="Collapsed" />--> </Style> </StackPanel.Resources> <!-- menu items --> <StackPanel x:Name="side_menu_panel"> <RadioButton Content="メニュー1"> <RadioButton.Template> <ControlTemplate TargetType="RadioButton"> <!-- Set background so that it can be selected. --> <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Cursor="Hand"> <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Width="45" Height="45" Fill="#FF21E402" /> </BulletDecorator.Bullet> <ContentPresenter Style="{StaticResource MarginLeft}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </BulletDecorator> </Border> </ControlTemplate> </RadioButton.Template> </RadioButton> <RadioButton Content="メニュー2"> <RadioButton.Template> <ControlTemplate TargetType="RadioButton"> <!-- Set background so that it can be selected. --> <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Cursor="Hand"> <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Width="45" Height="45" Fill="MediumVioletRed" /> </BulletDecorator.Bullet> <ContentPresenter Style="{StaticResource MarginLeft}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </BulletDecorator> </Border> </ControlTemplate> </RadioButton.Template> </RadioButton> </StackPanel> </StackPanel> <!-- main panel --> <Rectangle DockPanel.Dock="Right" Fill="Gray" /> </DockPanel> </Window>

実現したいこと

ソースコード中に、手計算で算出した数値がいくつかありますが、それらは自動的に算出させて、手計算を不要にしたいです。
但し、コードビハインド等を使って C# から計算するのではなく、XAMLのみで実現したいです。

自動計算させたい数値は、具体的には、

  • StackPanel の初期値 Width = 53
  • DoubleAnimation の To = 145 と To = 53

です。

メニューが閉じている時の幅は、「メニュー1」「メニュー2」の Visibility が Collapsed の状態で、StackPanel の Width を設定しなかったとき、自動的に計算される Width の値で計算できます。
つまり、手計算だと、4 + 45 + 4 = 53 です。(4 = RadioButton の Padding, 45 = Ellipse の Width)
メニューが開いている時の幅は、「メニュー1」「メニュー2」の Visibility が Visible の状態で、StackPanel の Width を設定しなかったとき、自動的に計算される Width の値で計算できます。
こっちは手計算はよく分からなかったのでやってません。とりあえず、145 で収まったのでそれにしただけです。

留意点

同じ動作が実現できるのであれば、使っているコントロールなどは自由に変えれます。
自分でコントロールをカスタムして作成する必要がある場合は、C#を使わないといけないと思いますので、その際はC#を使っても大丈夫です。
現状メニューとしてクリック可能な領域は、それぞれ以下の赤と青の矩形で示した領域の内側(境界線含む)です。
この動作についても現状のままとしたいです。
(したがって、アイコンの部分と「メニュー1」の部分を別のボタンなどにして分けるようなことはしたくないです)
選択可能領域

ご回答、よろしくお願い致します。

環境

Windows 10
Visual Studio 2019
.NET Core 3.1
WPF

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hihijiji

2021/11/27 02:32

XAMLのみで… 気持ちはよくわかります。 でもWPFのXAMLは四則演算すら出来ないので、こだわるとどんどん面倒なことになります。
tails

2021/11/27 03:52

TN8001さんに頂いた回答のような、Converter を使って行うなど、まぁとにかく 53 みたいな、マジックナンバー的なのがなくなれば大丈夫です。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです