Livetを使ったC#のWPFプログラミング

システムとして機能が網羅されたサンプルをもとに、Livetを使ったC#のWPFシステムの開発技能を身に付ける為の学習サイト


6-1.汎用ボトムボタン


戻る

ここでは、ボトムのボタンを画面ごとに異なる処理をするボタンにする方法を解説します。

下の画像は、画面の下に配置するボタンをViewsフォルダの内にUserControlFooterという名前のユーザーコントロールを作成した例です。

6.ユーザーコントロールのボトムボタンとの違いは、ボタンに表示されている文字です。ここでは、一番左に「保存」、中央に「閉じる」としています。
この文字は、元々はブランクで、画面が開いた時に編集しています。


Buttonをユーザーコントロールで作成


Windowの代わりにUserControlとなる
<UserControl 
    x:Class="LivetWPFApplication100.Views.UserControlFooter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    mc:Ignorable="d" 
    d:DesignHeight="84" d:DesignWidth="1035">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Styles.xaml"/>
                <ResourceDictionary Source="/Resources/StylesBG.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid Width="1025" Height="84">
        <Button Style="{StaticResource ButtonStyle1}" 
                Foreground="White" 
                Content="{Binding ButtonContent0}" Height="40" 
                HorizontalAlignment="Left" Margin="9,12,0,0" Name="button0" 
                VerticalAlignment="Top"  Width="8"  IsEnabled="False"  />

        <Button Style="{StaticResource ButtonStyle1}"  
                Command="{Binding Button1Command}" 
                IsEnabled="{Binding ButtonIsEnabled1}"
                Foreground="White"  
                Content="{Binding ButtonContent1}" Height="40" 
                HorizontalAlignment="Left" Margin="17,12,0,0" Name="button1" 
                VerticalAlignment="Top" Width="80" />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button2Command}" 
                IsEnabled="{Binding ButtonIsEnabled2}"
                Foreground="White"  
                Content="{Binding ButtonContent2}" Height="40" 
                HorizontalAlignment="Right" Margin="0,12,848,0" Name="button2" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}"  
                Command="{Binding Button3Command}" 
                IsEnabled="{Binding ButtonIsEnabled3}"
                Foreground="White"  
                Content="{Binding ButtonContent3}" Height="40" 
                HorizontalAlignment="Right" Margin="0,12,768,0" Name="button3" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button4Command}" 
                IsEnabled="{Binding ButtonIsEnabled4}"
                Foreground="White"  
                Content="{Binding ButtonContent4}" Height="40" 
                HorizontalAlignment="Left" Margin="257,12,0,0" Name="button4" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button5Command}"  
                IsEnabled="{Binding ButtonIsEnabled5}"
                Foreground="White"  
                Content="{Binding ButtonContent5}" Height="40" 
                HorizontalAlignment="Left" Margin="351,12,0,0" Name="button5" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button6Command}"  
                IsEnabled="{Binding ButtonIsEnabled6}" 
                Foreground="White"  
                Content="{Binding ButtonContent6}" Height="40" 
                HorizontalAlignment="Left" Margin="431,12,514,0" Name="button6" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button7Command}"  
                IsEnabled="{Binding ButtonIsEnabled7}" 
                Foreground="White" 
                Content="{Binding ButtonContent7}" Height="40" 
                HorizontalAlignment="Left" Margin="511,12,0,0" Name="button7" 
                VerticalAlignment="Top" Width="80" />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button8Command}"  
                IsEnabled="{Binding ButtonIsEnabled8}"
                Foreground="White"  
                Content="{Binding ButtonContent8}" Height="40" 
                HorizontalAlignment="Left" Margin="591,12,0,0" Name="button8" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button9Command}"  
                IsEnabled="{Binding ButtonIsEnabled9}" 
                Foreground="White"  
                Content="{Binding ButtonContent9}" Height="40" 
                HorizontalAlignment="Left" Margin="687,12,0,0" Name="button9" 
                VerticalAlignment="Top" Width="80" />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button10Command}"  
                IsEnabled="{Binding ButtonIsEnabled10}"
                Foreground="White"  
                Content="{Binding ButtonContent10}" Height="40" 
                HorizontalAlignment="Left" Margin="767,12,0,0" Name="button10" 
                VerticalAlignment="Top" Width="80" />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button11Command}"  
                IsEnabled="{Binding ButtonIsEnabled11}" 
                Foreground="White"  
                Content="{Binding ButtonContent11}" Height="40" 
                HorizontalAlignment="Left" Margin="848,12,98,0" Name="button11" 
                VerticalAlignment="Top" Width="80"  />

        <Button Style="{StaticResource ButtonStyle1}" 
                Command="{Binding Button12Command}"  
                IsEnabled="{Binding ButtonIsEnabled12}" 
                Foreground="White" 
                Content="{Binding ButtonContent12}" Height="40"                  
                HorizontalAlignment="Right" Margin="0,12,18,0" Name="Exit" 
                VerticalAlignment="Top" Width="80"   />

        <Button Style="{StaticResource ButtonStyle1}"  
                Foreground="White" 
                Content="{Binding ButtonContent11}" Height="40" 
                HorizontalAlignment="Left" Margin="1005,12,0,0" Name="button13" 
                VerticalAlignment="Top" Width="8"  IsEnabled="False" />

        <TextBox Text="{Binding txtSQL}" Height="20" 
                 HorizontalAlignment="Left" 
                 Margin="12,58,0,0" Name="txtMessage" 
                 VerticalAlignment="Top" Width="917"/>
        
        <TextBox Text="{Binding Path=txt本日}" TextAlignment="Center" Height="20" 
                 HorizontalAlignment="Center" 
                 Margin="929,58,15,0" Name="txt本日" 
                 VerticalAlignment="Top" Width="81" />
        
    </Grid>
</UserControl>


Viewでのユーザーコントロールの指定

画面(例えばWindow11.xaml)ではユーザーコントロールは下記のように指定します。

View
<Window x:Class="LivetWPFApplication100.Views.Window11"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
	    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	    xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
	    xmlns:local="clr-namespace:LivetWPFApplication100.ViewModels"
        xmlns:v="clr-namespace:LivetWPFApplication100.Views"  
        xmlns:vm="clr-namespace:LivetWPFApplication100.ViewModels"   
	    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
	    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	    mc:Ignorable="d"       
        WindowStartupLocation="CenterScreen"
	    Title="Window11" Height="714" Width="1035" >

    <Window.DataContext>
        <vm:ViewModel11 />
    </Window.DataContext>
    
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Styles.xaml"/>
                <ResourceDictionary Source="/Resources/Styles2.xaml"/>
                <ResourceDictionary Source="/Resources/StylesBG.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <i:Interaction.Triggers>
        <!--WindowのContentRenderedイベントのタイミングで
        ViewModelのInitializeメソッドが呼ばれます-->
        <i:EventTrigger EventName="ContentRendered">
            <l:LivetCallMethodAction MethodTarget="{Binding}" 
            MethodName="Initialize"/>
        </i:EventTrigger>

        <i:EventTrigger EventName="Loaded">
            <i:InvokeCommandAction Command="{Binding Path=Loaded}" 
                CommandParameter="{Binding Mode=OneTime,RelativeSource=
                {RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}"/>
        </i:EventTrigger>

        <i:EventTrigger EventName="Closing">
            <i:InvokeCommandAction Command="{Binding Path=Closing}"
                CommandParameter="{Binding Mode=OneTime,RelativeSource=
                {RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}"/>
        </i:EventTrigger>

        <l:InteractionMessageTrigger MessageKey="Button7Execute" 
                                     Messenger="{Binding Messenger}">
            <l:WindowInteractionMessageAction/>
        </l:InteractionMessageTrigger>

        <l:InteractionMessageTrigger MessageKey="WindowAction" 
			Messenger="{Binding Messenger, Mode=OneWay}">
            <l:WindowInteractionMessageAction/>
        </l:InteractionMessageTrigger>
    </i:Interaction.Triggers>

    <Grid   Background="#FFE6E6FA">

        <v:UserControlFooter Margin="0,0,0,0" HorizontalAlignment="Left" 
                             VerticalAlignment="Bottom" />

    </Grid>
</Window>


ViewModel

ViewModel(例えばViewModel11.cs)は下記の通りです。

View
using System.Collections.Generic;
using System.Linq;

//INotifyPropertyChanged
//PropertyChanged
using System.ComponentModel;

//[DllImport("user32.dll")]
using System.Runtime.InteropServices;

//コントロールボックスの閉じるの無効化
using System.Windows.Interop;

//ICommand
using System.Windows.Input;

//MessageBox
using System.Windows;

using Livet;
using Livet.Commands;
using Livet.Messaging;

//CloseCommand
using Livet.Messaging.Windows;

using Common;

namespace LivetWPFApplication100.ViewModels
{
    class ViewModel11 : ViewModel
    {
        #region 変更通知プロパティ
        //-----------------------------------------------
        public string txtMessage { get; set; }
        public string txt本日 { get; set; }
        //-----------------------------------------------
        public string ButtonContent1 { get; set; }
        public bool ButtonIsEnabled1 { get; set; }
        public bool CommandParameter1 { get; set; }
        //-----------------------------------------------
        public string ButtonContent2 { get; set; }
        public bool ButtonIsEnabled2 { get; set; }
        public bool CommandParameter2 { get; set; }
        //-----------------------------------------------
        public string ButtonContent3 { get; set; }
        public bool ButtonIsEnabled3 { get; set; }
        public bool CommandParameter3 { get; set; }
        //-----------------------------------------------
        public string ButtonContent4 { get; set; }
        public bool ButtonIsEnabled4 { get; set; }
        public bool CommandParameter4 { get; set; }
        //-----------------------------------------------
        public string ButtonContent5 { get; set; }
        public bool ButtonIsEnabled5 { get; set; }
        public bool CommandParameter5 { get; set; }
        //-----------------------------------------------
        public string ButtonContent6 { get; set; }
        public bool ButtonIsEnabled6 { get; set; }
        public bool CommandParameter6 { get; set; }
        //-----------------------------------------------
        public string ButtonContent7 { get; set; }
        public bool ButtonIsEnabled7 { get; set; }
        public bool CommandParameter7 { get; set; }
        //-----------------------------------------------
        public string ButtonContent8 { get; set; }
        public bool ButtonIsEnabled8 { get; set; }
        public bool CommandParameter8 { get; set; }
        //-----------------------------------------------
        public string ButtonContent9 { get; set; }
        public bool ButtonIsEnabled9 { get; set; }
        public bool CommandParameter9 { get; set; }
        //-----------------------------------------------
        public string ButtonContent10 { get; set; }
        public bool ButtonIsEnabled10 { get; set; }
        public bool CommandParameter10 { get; set; }
        //-----------------------------------------------
        public string ButtonContent11 { get; set; }
        public bool ButtonIsEnabled11 { get; set; }
        public bool CommandParameter11 { get; set; }
        //-----------------------------------------------
        public string ButtonContent12 { get; set; }
        public bool ButtonIsEnabled12 { get; set; }
        public bool CommandParameter12 { get; set; }
        //-----------------------------------------------
        #endregion

		Window win = null;
        public ViewModel11()
        {
           // txtMessage = "Loaded";
            txt本日 = DB.str本日;
            Loaded = new Livet.Commands.ListenerCommand<Window>((w) =>
            {
                if (NeedHideOwner && w.Owner != null && w.Owner.Visibility == 
                Visibility.Visible)
                {
                    win = w;
                    //w.Owner.Hide();
                }
            });

            Closing = new Livet.Commands.ListenerCommand<Window>((w) =>
            {
                if (NeedHideOwner && w.Owner != null)
                {
                    w.Owner.Show();
                }
            });

            ButtonContent1 = "保存";
            ButtonIsEnabled1 = true;

            ButtonIsEnabled2 = false;
            ButtonIsEnabled3 = false;
            ButtonIsEnabled4 = false;
            ButtonIsEnabled5 = false;
            ButtonIsEnabled6 = false;

            ButtonContent7 = "閉じる";
            ButtonIsEnabled7 = true;

            ButtonIsEnabled8 = false;
            ButtonIsEnabled9 = false;
            ButtonIsEnabled10 = false;
            ButtonIsEnabled11 = false;
            ButtonIsEnabled12 = false; 

        }
        public bool NeedHideOwner { get; set; }
        public ICommand Loaded { get; private set; }
        public ICommand Closing { get; private set; }


        public void Initialize()
        {
        	if (win != null) win.Owner.Hide();
            XCloseButtonManager.Disable();
        }

        #region Button1Command //ボトムボタン1のコマンド

        private ViewModelCommand _button1Command;
        public ViewModelCommand Button1Command
        {
            get
            {
                if (this._button1Command == null)
                {
                    this._button1Command = new ViewModelCommand(Button1Execute, 
                    CanButton1Execute);
                }
                return this._button1Command;
            }
        }
        private void Button1Execute()
        {
            MessageBox.Show("Button1Command");
        }
        private bool CanButton1Execute()
        {
            return true;
        }
        #endregion
        
        #region Button7Command //ボトムボタン7のコマンド (閉じる)

        private ViewModelCommand _button7Command;
        public ViewModelCommand Button7Command
        {
            get
            {
                if (this._button7Command == null)
                {
                    this._button7Command = new ViewModelCommand(Button7Execute, 
                    CanButton7Execute);
                }
                return this._button7Command;
            }
        }
        private void Button7Execute()
        {
            var window = Application.Current.Windows.OfType<Window>().
            SingleOrDefault((w) => w.IsActive);
            window.Close();
        }
        private bool CanButton7Execute()
        {
            return true;
        }
        #endregion

    }
}