XAMLを使わないWPF入門15「DockPanelでアドレスバー」

コンピュータ

エクスプローラーのアドレスバーは中央にアドレスを入力するコントロールがありますが、ウィンドウの拡大縮小でコントロールの幅も拡大縮小します。
DockPanelを使って再現してみたいと思います。

ファイル名:NoXAML15StackPanel.csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net8.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseWPF>true</UseWPF>
    <StartUP>NoXAML15StackPanel.App</StartUP>
  </PropertyGroup>

</Project>

ファイル名:AddressBar.cs

using System.Windows;
using System.Windows.Controls;

namespace NoXAML15StackPanel;
public class AddressBar : DockPanel
{
    public Button BackButton { get; private set; }
    public Button ForwardButton { get; private set; }
    public Button UpButton { get; private set; }
    public TextBox AddressBox { get; private set; }
    public TextBox SearchBox { get; private set; }

    public AddressBar()
    {
        LastChildFill = true;
        Height = 30;
        Margin = new Thickness(4);

        Thickness _m = new Thickness(0, 0, 4, 0);

        // ←→↑ ボタンをまとめるパネル
        var buttonPanel = new StackPanel
        {
            Orientation = Orientation.Horizontal,
            Margin = _m,
            VerticalAlignment = VerticalAlignment.Center
        };

        BackButton = new Button { Content = "←", Width = 30, Height = 30,Margin = _m, };
        ForwardButton = new Button { Content = "→", Width = 30, Height = 30,Margin = _m, };
        UpButton = new Button { Content = "↑", Width = 30, Height = 30,Margin = _m, };

        buttonPanel.Children.Add(BackButton);
        buttonPanel.Children.Add(ForwardButton);
        buttonPanel.Children.Add(UpButton);

        SetDock(buttonPanel, Dock.Left);
        Children.Add(buttonPanel);

        // 検索ボックス(右端)
        SearchBox = new TextBox
        {
            Width = 150,
            Margin = new Thickness(4, 0, 0, 0),
            VerticalContentAlignment = VerticalAlignment.Center
        };
        SetDock(SearchBox, Dock.Right);
        Children.Add(SearchBox);

        // アドレスボックス(中央のFill)
        AddressBox = new TextBox
        {
            Margin = new Thickness(4, 0, 0, 0),
            VerticalContentAlignment = VerticalAlignment.Center
        };
        Children.Add(AddressBox); // Fill
    }
}

ファイル名:MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;

namespace NoXAML15StackPanel;
public partial class MainWindow : Window
{
    public MainWindow()
    {
        Title = "アドレスバー";
        Width = 800;
        Height = 150;

        var root = new DockPanel();

        var addressBar = new AddressBar();
        DockPanel.SetDock(addressBar, Dock.Top);
        var label = new Label() { Content = "Body" };
        
        root.Children.Add(addressBar);
        root.Children.Add(label);

        Content = root;
    }
}

ファイル名:App.xaml.cs

using System.Windows;

namespace NoXAML15StackPanel;

public partial class App : Application
{
    [STAThread]
    public static void Main()
    {
        var app = new App();
        var window = new MainWindow();
        app.Run(window);
    }
}

実行

ウィンドウサイズを縮めると、中央のテキストボックスだけが縮む

コメント