MochiuWiki : SUSE, EC, PCB

「Avalonia UI - StackPanel」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の3版が非表示)
82行目: 82行目:
! style="background-color:#00ffff;" | 説明  
! style="background-color:#00ffff;" | 説明  
|-
|-
| ||  
| PointerEntered<br>(マウスオーバー) || マウスポインタがStackPanel上に入った時に発生する。<br>例えば、パネルにマウスが重なった時に背景色を変更する、あるいは、ツールチップを表示する場合に使用する。<br>
<syntaxhighlight lang="xml">
<StackPanel PointerEntered="OnPointerEntered">
</syntaxhighlight>
|-
|-
| ||  
| PointerExited<br>(マウスアウト) || マウスポインタがStackPanelから出た時に発生する。<br>例えば、PointerEnteredで変更した背景色を元に戻す、あるいは、表示したツールチップを非表示にする場合に使用する。<br>
<syntaxhighlight lang="xml">
<StackPanel PointerExited="OnPointerExited">
</syntaxhighlight>
|-
|-
|  ||  
| Loaded<br>(読み込み完了) || StackPanelがビジュアルツリーに読み込まれた時に発生する。<br>例えば、パネルの初期化処理や子要素の動的な追加等を行う場合に使用する。<br>
<syntaxhighlight lang="xml">
<StackPanel Loaded="OnLoaded">
</syntaxhighlight>
|-
| Tapped<br>(タップ / クリック) || StackPanel上でタップまたはクリックされた時に発生する。<br>例えば、パネル全体をクリック可能な領域として使用する場合、あるいは、特定のアクションを実行する場合に使用する。<br>
<syntaxhighlight lang="xml">
<StackPanel Tapped="OnTapped">
</syntaxhighlight>
|-
| SizeChanged<br>(サイズ変更) || StackPanelのサイズが変更された時に発生する。<br>例えば、パネルのサイズに応じて子要素のレイアウトを動的に調整する必要がある場合に使用する。<br>
<syntaxhighlight lang="xml">
<StackPanel SizeChanged="OnSizeChanged">
</syntaxhighlight>
|}
</center>
<br>
各イベントはコードビハインドを使用して、以下に示すように処理することができる。<br>
以下の例では、マウスポインタがStackPanel上に入った時、StackPanelの背景色を変更している。<br>
<br>
<syntaxhighlight lang="c#">
private void OnPointerEntered(object sender, PointerEventArgs e)
{
    var panel        = (StackPanel)sender;
    panel.Background = Brushes.LightBlue;
}
  </syntaxhighlight>
<br>
StackPanelのイベントの詳細を知りたい場合は、[https://reference.avaloniaui.net/api/Avalonia.Controls/StackPanel/#Events Avalonia UIの公式Webサイト]を参照すること。<br>
<br><br>
 
== 基本的なメソッド ==
<center>
{| class="wikitable" | style="background-color:#fefefe;"
|-
! style="background-color:#00ffff;" | メソッド
! style="background-color:#00ffff;" | 説明
|-
| Children.Add<br>(要素追加) || StackPanelに子要素を動的に追加する。<br>例えば、実行時にユーザの操作に応じて、新しい要素を追加する場合などに使用する。<br>
<syntaxhighlight lang="c#">
var button = new Button { Content = "新しいボタン" };
myStackPanel.Children.Add(button);
</syntaxhighlight>
|-
| Children.Remove<br>(要素削除) || 指定した子要素をStackPanelから削除する。<br>例えば、特定の要素を動的に削除する必要がある場合に使用する。<br>
<syntaxhighlight lang="c#">
if (myStackPanel.Children.Contains(targetElement))
{
    myStackPanel.Children.Remove(targetElement);
}
</syntaxhighlight>
|-
| Children.Clear<br>(全要素削除) || StackPanel内の全ての子要素を削除する。<br>例えば、パネルの内容を完全にリセットする場合等に使用する。<br>
<syntaxhighlight lang="c#">
myStackPanel.Children.Clear();
</syntaxhighlight>
|-
| FindControl<T><br>(要素検索) || 指定した型の子要素を検索する。<br>例えば、特定の子要素を名前で検索して操作する場合に使用する。<br>
<syntaxhighlight lang="c#">
var targetButton = myStackPanel.FindControl<Button>("buttonName");
if (targetButton != null)
{
    targetButton.Content = "更新されたテキスト";
}
</syntaxhighlight>
|-
| InvalidateVisual<br>(再描画要求) || StackPanelの視覚的な更新を要求する。<br>例えば、パネルの外観を手動で更新する必要がある場合に使用する。<br>
<syntaxhighlight lang="c#">
myStackPanel.InvalidateVisual();
</syntaxhighlight>
|-
| BringIntoView<br>(表示位置調整) || StackPanelを視覚的に表示可能な位置までスクロールする。<br>例えば、スクロール可能なコンテナ内でパネルを確実に表示させる場合に使用する。<br>
<syntaxhighlight lang="c#">
await myStackPanel.BringIntoView();
</syntaxhighlight>
|}
|}
</center>
</center>
<br>
<u>※注意</u><br>
<u>上表のメソッドはコードビハインドやビューモデルから呼び出すことができる。</u><br>
<u>ただし、MVVMパターンを使用する場合は、可能な限りデータバインディングを使用することを推奨する。</u><br>
<br>
<u>例えば、Children.Addメソッドの代わりにItemsControlとコレクションを使用する等の方法がある。</u><br>
<br>
なお、操作によっては、UIスレッド上での実行が必要な場合がある。<br>
<syntaxhighlight lang="c#">
await Dispatcher.UIThread.InvokeAsync(() =>
{
    myStackPanel.Children.Add(newElement);
});
</syntaxhighlight>
<br>
StackPanelのメソッドの詳細を知りたい場合は、[https://reference.avaloniaui.net/api/Avalonia.Controls/StackPanel/#Methods Avalonia UIの公式Webサイト]を参照すること。<br>
<br><br>
== 使用例 ==
以下の例では、StackPanelは垂直方向に要素を配置して、フォーム全体を構成している。<br>
ボタンおよびプルダウンの配置には、水平方向のStackPanelを使用している。<br>
<br>
<syntaxhighlight lang="xml">
<!-- MainWindow.axaml -->
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication.MainWindow"
        Title="StackPanel サンプル"
        Width="400"
        Height="500">
    <!-- メインのStackPanel - 垂直方向に要素を配置 -->
    <StackPanel Margin="20">
      <!-- ヘッダセクション -->
      <TextBlock Text="ユーザ情報入力"
                  FontSize="24"
                  FontWeight="Bold"
                  Margin="0,0,0,20"/>
      <!-- 入力フォームセクション -->
      <TextBlock Text="氏名:" Margin="0,0,0,5"/>
      <TextBox x:Name="NameTextBox"
                Margin="0,0,0,10"
                Watermark="氏名を入力してください"/>
      <!-- メールアドレス入力セクション -->
      <TextBlock Text="メールアドレス:" Margin="0,0,0,5"/>
      <TextBox x:Name="EmailTextBox"
                Margin="0,0,0,10"
                Watermark="メールアドレスを入力してください"/>
      <!-- 年齢入力セクション -->
      <TextBlock Text="年齢:" Margin="0,0,0,5"/>
      <NumericUpDown x:Name="AgeNumericUpDown"
                      Minimum="0"
                      Maximum="120"
                      Value="20"
                      Margin="0,0,0,20"/>
      <!-- 性別選択セクション - 水平方向のStackPanel -->
      <TextBlock Text="性別:" Margin="0,0,0,5"/>
      <StackPanel Orientation="Horizontal"
                  Spacing="10"
                  Margin="0,0,0,20">
          <RadioButton Content="Male"
                      GroupName="Gender"
                      IsChecked="True"/>
          <RadioButton Content="Female"
                      GroupName="Gender"/>
          <RadioButton Content="その他"
                      GroupName="Gender"/>
      </StackPanel>
      <!-- 趣味選択セクション -->
      <TextBlock Text="趣味:" Margin="0,0,0,5"/>
      <StackPanel Margin="0,0,0,20">
          <CheckBox Content="読書" Margin="0,0,0,5"/>
          <CheckBox Content="スポーツ" Margin="0,0,0,5"/>
          <CheckBox Content="音楽" Margin="0,0,0,5"/>
          <CheckBox Content="旅行" Margin="0,0,0,5"/>
      </StackPanel>
      <!-- ボタンセクション - 水平方向のStackPanel -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Right"
                  Spacing="10">
          <Button Content="クリア"
                  Width="100"
                  x:Name="ClearButton"/>
          <Button Content="送信"
                  Width="100"
                  Classes="accent"
                  x:Name="SubmitButton"/>
      </StackPanel>
    </StackPanel>
</Window>
</syntaxhighlight>
<br>
<syntaxhighlight lang="c#">
// MainWindow.axaml.csファイル
using Avalonia.Controls;
using Avalonia.Interactivity;
using MsBox.Avalonia;
namespace AvaloniaApplication
{
    public partial class MainWindow : Window
    {
      public MainWindow()
      {
          InitializeComponent();
          // ボタンのクリックイベントハンドラを設定
          ClearButton.Click  += ClearButton_Click;
          SubmitButton.Click += SubmitButton_Click;
      }
      // クリアボタンを押下した時
      private void ClearButton_Click(object sender, RoutedEventArgs e)
      {
          // 各入力フィールドをクリア
          NameTextBox.Text      = string.Empty;
          EmailTextBox.Text      = string.Empty;
          AgeNumericUpDown.Value = 20;  // デフォルト値に戻す
          // チェックボックスをすべて未選択に
          var checkBoxes = this.FindControl<StackPanel>("HobbiesPanel")
                              .Children.OfType<CheckBox>();
          foreach (var checkbox in checkBoxes)
          {
            checkbox.IsChecked = false;
          }
      }
      // 送信ボタンを押下した時
      private async void SubmitButton_Click(object sender, RoutedEventArgs e)
      {
          // 入力値の検証
          if (string.IsNullOrWhiteSpace(NameTextBox.Text))
          {
            // 警告メッセージを表示
            var msgbox = MessageBoxManager.GetMessageBoxStandard("入力エラー",
                                                                  "氏名を入力",
                                                                  ButtonEnum.Ok,
                                                                  Icon.Warning);
            await msgbox.ShowAsync();
            return;
          }
          if (string.IsNullOrWhiteSpace(EmailTextBox.Text))
          {
            // 警告メッセージを表示
            var msgbox = MessageBoxManager.GetMessageBoxStandard("入力エラー",
                                                                  "メールアドレスを入力",
                                                                  ButtonEnum.Ok,
                                                                  Icon.Warning);
            await msgbox.ShowAsync();
            return;
          }
          // 送信確認のダイアログを表示
          var confirmBox = MessageBoxManager.GetMessageBoxStandard("確認",
                                                                  "入力した情報を送信しますか？",
                                                                  ButtonEnum.YesNo,
                                                                  Icon.Question);
          var result = await confirmBox.ShowAsync();
          if (result == ButtonResult.Yes)
          {
            // ...略 (送信処理)
            // 成功メッセージを表示
            var successBox = MessageBoxManager.GetMessageBoxStandard("送信完了",
                                                                      "情報を正常に送信",
                                                                      ButtonEnum.Ok,
                                                                      Icon.Success);
            await successBox.ShowAsync();
          }
      }
    }
}
</syntaxhighlight>
<br><br>
<br><br>


「http://mochiuwiki.e2.valueserver.jp/index.php?title=Avalonia_UI_-_StackPanel」から取得