2017年11月30日木曜日

flutter 開発メモ

flutter 開発に関するメモです。基本的な内容がほとんどです。

アプリケーションテンプレートの生成
flutter create watashi_app

アプリケーションの実行
アプリケーションのトップフォルダ（pubspec.yaml のあるフォルダ）で、次を実行
flutter run


on 0 件のコメント:
ラベル: , , , ,

2017年11月23日木曜日

WPF 添付イベント（Attached Event）実装例

添付イベントの実装例を紹介します。

MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        
        private void InputChangedHandler(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("InputChangedHanlder is called.");
        }
    }

    public static class EventHelper
    {
        public static readonly DependencyProperty IsEventRaisingProperty =
            DependencyProperty.RegisterAttached("IsEventRaising",
            typeof(bool),
            typeof(EventHelper),
            new FrameworkPropertyMetadata(false, new PropertyChangedCallback(OnIsEventRaisingChanged)));

        public static bool GetIsEventRaising(DependencyObject sender)
        {
            return (bool)sender.GetValue(IsEventRaisingProperty);
        }

        public static void SetIsEventRaising(DependencyObject sender, bool ier)
        {
            sender.SetValue(IsEventRaisingProperty, ier);
        }

        public static readonly RoutedEvent InputChangedEvent = EventManager.RegisterRoutedEvent(
            "InputChanged",
            RoutingStrategy.Bubble,
            typeof(RoutedEventHandler),
            typeof(EventHelper)
        );

        public static void AddInputChangedHandler(DependencyObject sender, RoutedEventHandler handler)
        {
            UIElement element = sender as UIElement;
            if (element != null)
            {
                element.AddHandler(InputChangedEvent, handler);
            }
        }

        public static void RemoveInputChangedHandler(DependencyObject sender, RoutedEventHandler handler)
        {
            UIElement element = sender as UIElement;
            if (element != null)
            {
                element.RemoveHandler(InputChangedEvent, handler);
            }
        }

        private static void OnIsEventRaisingChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            (sender as TextBox).TextChanged += (_s, _e) =>
            {
                (sender as TextBox).RaiseEvent(new RoutedEventArgs(InputChangedEvent));
            };
        }
    }
}

MainWindow.xaml
<Window
        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:WpfApp3"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:Custom="http://infragistics.com/DockManager" x:Class="WpfApp3.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>
        <TextBox local:EventHelper.IsEventRaising="True"
                 local:EventHelper.InputChanged="InputChangedHandler"
                             />
    </Grid>
</Window>

on 0 件のコメント:
ラベル: ,

2017年11月20日月曜日

WPF ユーザーコントロールのプロパティにデータをバインド

ユーザーコントロールのプロパティに、他のユーザーコントロールのプロパティをバインドしてみます。

ターゲットプロパティ・・・値を設定するプロパティ
ソースプロパティ・・・値を取得してくるプロパティ

ターゲットプロパティは、依存関係プロパティ（Dependency Property）である必要があります。


実装例：
この例では、Slider コントロールの Value プロパティを、TextBox の Text プロパティにバインドしています。なお、TextBox の Text プロパティは依存関係プロパティ（Dependency Property）です。

<Slider x:Name="slider1"
        HorizontalAlignment="Left" 
        Margin="49,36,0,0" 
        VerticalAlignment="Top" 
        Width="257"
        />
<TextBox HorizontalAlignment="Left"
         Height="24" Margin="49,85,0,0" 
         TextWrapping="Wrap"
         VerticalAlignment="Top"
         Width="257"
         Text="{Binding ElementName=slider1, Path=Value}"/>
on 0 件のコメント:
ラベル: ,

2017年11月19日日曜日

WPF Trigger 実装例

WPF Trigger の実装例です。

Button の Content の値に応じて Button の背景色を赤色に変更します。また、Button にマウスがホバーしている間、Button の文字色を白色に変更します。


<Window x:Class="TriggerDemo.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:TriggerDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button
            Content="button1"
            Height="30"
            Width="200">
            <Button.Resources>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <!--Content が "button1" ならば-->
                        <Trigger Property="Content" Value="button1">
                            <!--背景色を赤色に変更-->
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                        <!--Button 上にマウスがホバーしていたら-->
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--前景色を白色に変更-->
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Resources>
        </Button>
    </Grid>
</Window>


関連情報：

WPF DataTrigger 実装例
http://kainobi2.blogspot.jp/2017/05/wpf-datatrigger.html
on 0 件のコメント:
ラベル: ,

2017年11月18日土曜日

WPF 添付プロパティ（Attached Property）の実装方法

WPF でクラスインスタンスを利用する際に、クラスに対して直接プロパティを追加できないが、任意のプロパティを追加して利用したい状況があるかと思います。そのような場合、添付プロパティ（Attached Property）を利用することができます。


MainWindow.xaml.cs

コードビハインドで「propa」と入力してスニペットを挿入します。その後、適宜名前やメタデータを変更していきます。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public static double GetRecord(DependencyObject obj)
    {
        return (double)obj.GetValue(RecordProperty);
    }

    public static void SetRecord(DependencyObject obj, double value)
    {
        obj.SetValue(RecordProperty, value);
    }

    // Using a DependencyProperty as the backing store for Record.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty RecordProperty =
        DependencyProperty.RegisterAttached("Record",
            typeof(double),
            typeof(MainWindow), 
            new FrameworkPropertyMetadata(0.0)
            );

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var btn = sender as Button;
        Debug.WriteLine(btn.GetValue(RecordProperty));
    }
}



MainWindow.xaml

追加した Record 添付プロパティに、double 値を設定します。

<Window x:Class="AttachedPropertyDemo.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:AttachedPropertyDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button 
            Content="abc"
            Height="30"
            Width="200"
            local:MainWindow.Record="3.0"
            Click="Button_Click"/>
    </Grid>
</Window>

関連情報：
WPF 依存関係プロパティ
http://kainobi2.blogspot.jp/2016/11/wpf.html
on 0 件のコメント:
ラベル: ,

2017年11月17日金曜日

WPF バインディング：Source の使い方

Binding オブジェクトの持つ、Source プロパティの利用方法の紹介です。Source プロパティを利用することで、Resources に登録されている任意のオブジェクトを参照することができます。

例えば、Resources に用意されている Int 型の値を、TextBox の Tooltip プロパティにバインドしてみます。

※ Int 型の値を利用するためには、mscorlib アセンブリの参照を追加しています。

<Window x:Class="WpfApp3.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:WpfApp3"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <sys:Int32 x:Key="num1">123</sys:Int32>
        </Grid.Resources>

        <TextBox x:Name="textBox1"
                 Height="30"
                 Width="250"
                 Text="abc"
                 ToolTip="{Binding Source={StaticResource num1}}"/>
    </Grid>
</Window>

on 0 件のコメント:
ラベル: ,

2017年11月11日土曜日

WPF バインディング：RelativeSource の使い方

Binding オブジェクトの持つ、RelativeSource プロパティの利用方法の紹介です。

バインディングを利用して、バインドするソースとして、バインドターゲットの UI 要素から相対位置に存在する UI 要素のプロパティを指定する時には、RelativeSource プロパティを利用することができます。

例えば、TextBox の Tooltip プロパティにバインドするバインドソースとして、TextBox の親（Grid）の親である Window の Title プロパティを利用することを考えてみます。

デザインタイムでは、UI 要素は下記の構造になっています。TextBox から、2 つ上位にある Window のプロパティを参照します。

Window
    - Grid
        - TextBox


TextBox.Tooltip プロパティには、RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window} として、RelativeSoure を利用し、Mode に FindAncestor、AncestorType に Window をそれぞれ指定しています。これで、TextBox のツールチップには「MainWindow X」という値が表示されるようになります。

<Window x:Class="WpfApp3.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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>

        <TextBox x:Name="textBox1"
                 Height="30"
                 Width="250"
                 Text="abc"
                 ToolTip="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=Title}"/>
    </Grid>
</Window>
on 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)