CustomScript

ページ

2014年11月30日日曜日

WPF勉強(7) VisualStudio2013みたいなスタイルのウィンドウを作る

  • .Net4.5
  • Win7


ウィンドウの見栄えをVisualStudio2013のようにします。

下記ページを参考に作成していますので、まずこちらをご一読ください

【grabacr.nét】WPF で Zune のようなウィンドウを作る
 http://grabacr.net/archives/480

使用するリソースは以下の2つです
WindowChrome
非クライアント領域のカスタマイズ
.Net4.5には標準で入っています

PresentationFramework.AeroLite
Windows8っぽいテーマ
参照に追加します。配布バイナリが動かない場合はプロパティの「ローカルコピー」をTrueにしてください

スタイル定義は以下の通りです。
AeroLiteテーマを適用し、システムボタン用にスタイルを幾つか追加定義しています。
<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <ResourceDictionary.MergedDictionaries>

        <!-- Theme: AeroLite -->
        <ResourceDictionary Source="/presentationframework.AeroLite;component/themes/aerolite.normalcolor.xaml" />

        <!-- Custom Styles -->
        <ResourceDictionary>
            <SolidColorBrush x:Key="WindowColor" Color="#FFD6DBE9"/>
            <SolidColorBrush x:Key="ClientColor" Color="#FF293955"/>

            <!-- System Buttons -->
            <Style x:Key="SystemButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
                <Setter Property="Background" Value="{StaticResource WindowColor}" />
                <Setter Property="BorderBrush" Value="{StaticResource WindowColor}" />
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="FontFamily" Value="Marlett" />
                <Setter Property="FontSize" Value="14px" />
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="12,8,10,4" />
            </Style>

            <!-- ウィンドウ最大化時に枠幅を変更するためのスタイル-->
            <Style x:Key="MaximumStyle" TargetType="Grid">
                <Setter Property="Background" Value="{StaticResource WindowColor}"/>
                <Setter Property="Margin" Value="6"/>
            </Style>
            <Style x:Key="NormalStyle" TargetType="Grid">
                <Setter Property="Background" Value="{StaticResource WindowColor}"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
            
        </ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

ウィンドウ定義は以下通りです。
標準ボタンの代わりになるコントロールをごりごり書いています。
<Window x:Name="SampleWindow" x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SampleApplication" Height="240" Width="360" Background="#FF8F99A0" SnapsToDevicePixels="True" MinWidth="256" MinHeight="128" StateChanged="SampleWindow_StateChanged">

    <WindowChrome.WindowChrome>
        <WindowChrome UseAeroCaptionButtons="False" CaptionHeight="24" ResizeBorderThickness="8" />
    </WindowChrome.WindowChrome>

    <Window.Resources>
        <ResourceDictionary Source="SampleStyle.xaml" />
    </Window.Resources>

    <Border BorderBrush="Black" BorderThickness="1">
        <Grid x:Name="BaseGrid" Style="{StaticResource NormalStyle}">

            <!-- タイトルバー領域 -->
            <Image x:Name="WindowIcon" Margin="4,4,0,0" Source="icon.png" Stretch="Fill" Width="32" Height="32" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <TextBlock x:Name="WindowTitle" HorizontalAlignment="Left" Margin="44,12,0,0" Text="Sample Application" VerticalAlignment="Top"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
                <Button x:Name="MinimizeButton" Content="0" Style="{StaticResource SystemButton}" FontWeight="Bold" Click="MinimizeButton_Click" />
                <Button x:Name="MaximizeButton" Content="1" Style="{StaticResource SystemButton}" Click="MaximizeButton_Click" />
                <Button x:Name="CloseButton" Content="r" Style="{StaticResource SystemButton}" Click="CloseButton_Click" />
            </StackPanel>

            <!-- クライアント領域 -->
            <Grid x:Name="ClientGrid" Margin="0,40,0,0" Background="{StaticResource ClientColor}">
                <Menu Height="24" VerticalAlignment="Top" Background="{StaticResource WindowColor}">
                    <MenuItem Header="ファイル(_C)"/>
                    <MenuItem Header="編集(_E)"/>
                    <MenuItem Header="ヘルプ(_H)"/>
                </Menu>
            </Grid>

        </Grid>
    </Border>
</Window>

ウィンドウのコードは以下の通りです。
コマンドバインドがまだよくわかっていないので、イベントで実装しています。
標準ボタンの置き換えですが、最大化ボタンのみウィンドウの状態で挙動を変化させるようにしています。

最大化時にウィンドウ端のボタン等が見きれてしまうため、コンテンツが画面内に収まるようにスタイルを切り替えてMarginを変えることで対応しています。ですが、正しい方法じゃないよねこれ。
using System;
using System.Collections.Generic;
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 Sample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        // 閉じるボタン
        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            SystemCommands.CloseWindow(this);
        }

        // 最小化ボタン
        private void MinimizeButton_Click(object sender, RoutedEventArgs e)
        {
            SystemCommands.MinimizeWindow(this);
        }

        // 最大化ボタン
        //ウィンドウ状態によってはウィンドウサイズ復帰動作になる
        private void MaximizeButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.WindowState == WindowState.Maximized)
                SystemCommands.RestoreWindow(this);
            else
                SystemCommands.MaximizeWindow(this);
        }

        // ウィンドウ状態が変化したら最大化ボタン記号を変更する
        // 最大化状態になったときに画面外まで表示されるのを防ぐためにスタイルを
        // 変更して画面内にコンテンツが収まるようにする
        private void SampleWindow_StateChanged(object sender, EventArgs e)
        {
            if (this.WindowState == WindowState.Maximized)
            {
                this.BaseGrid.Style = (Style)(this.Resources["MaximumStyle"]);
                this.MaximizeButton.Content = "2";
            }
            else
            {
                this.BaseGrid.Style = (Style)(this.Resources["NormalStyle"]);
                this.MaximizeButton.Content = "1";
            }
        }
    }
}
こんなかんじで、それっぽいウィンドウになります。

2014年11月28日金曜日

WPF勉強(6) GitとBitBucketとVisualStudio2013と

  • VS2013
 

WPFアプリを作っていてふとbinフォルダを見たら、よくわからない不要なファイルができていました。いつからなんだろう?何をしたから?こんな時にバージョン管理システムあればなー、ということで導入してみます。

バージョン管理システムは今最もメジャーであろうGitに挑戦してみます。VisualStudio2013はGitを使ってコード管理できるようなので都合も良いです。リポジトリ置き場には非公開リポジトリを無料で使えるBitBucketを使います。

Git

コマンドラインが基本でしょう、ということで、コマンドライン版Gitを使えるようにします。

Gitオフィシャルサイト
http://www.git-scm.com/

ここからWindows版バイナリをダウンロードし、インストールします。この記事の時点で最新版が Git-1.9.4-preview20140929.exe でした。
インストールされる Git Bash がGitを使うコマンドライン環境になります。

Gitの日本語サポートは完全ではありません。ファイル名は英数字のみにしたほうが無難でしょう。
Git Bash もインストールのままでは足りない場合があるので必要に応じ設定します。
現象
日本語が四角(□)で表示されてしまう
解決方法
コンソールウィンドウのフォントを設定しなおします。
・[スタートメニュー]から[Git Bash]を選んで右クリックして[プロパティ]を選択、設定画面を呼び出す
・[フォント]タブでフォントを選びなおして[適用]
現象
lsで日本語ファイル名が??????になってしまう
解決方法
ls --show-control-chars で表示されます。.bashrcを作りalias設定しておくとよいでしょう

準備ができたら勉強開始です。
基本的なGit操作の勉強には下記サイトがお勧めです。短いムービーでチュートリアル形式で解説されているので取っ付き易いと思います。

【ドットインストール】git入門
http://dotinstall.com/lessons/basic_git

 BitBucket + Git

Gitがなんとなく判ったら BitBucket にリポジトリを作って使ってみましょう。

【なんとなしの日記】BitBucket(Git)が便利すぎるので使い方をまとめとく
http://babyp.blog55.fc2.com/blog-entry-939.html

リポジトリにはSSH接続もできます。ssh-keygenは Git Bash から使用できます

【株式会社CFlatの明後日スタイルのブログ】BitbucketにSSHでアクセスする
http://cflat-inc.hatenablog.com/entry/20130311/1362955659


VisualStudio2013 + BitBucket + Git


BitBucketの使い方がわかってきたら、VisualStudio2013からBitBucketにつなげてみましょう。注意点として、VisualStudio2013のGitはSSH接続がサポートされていないようです。HTTPSでリポジトリを指定してください。

【某エンジニアの日記】Visual Studio 2013 と Bitbucket
http://ina365.wordpress.com/2014/06/17/visual-studio-2013-%E3%81%A8-bitbucket/


これでひと通り使えるようになりました。あとは実際に使って慣れていきましょう。

2014年11月27日木曜日

WPF勉強(5) async/awaitと例外処理

  • VS2013
重いコンバート処理などでウィンドウが固まるのを回避するために非同期処理を実装します。
で、async/awaitを使ってみたのですが、例外のキャッチが上手く行かなかったのでいろいろ試してみました。

        // Button1 Click Event
        private async void Button1_Click(object sender, RoutedEventArgs e)
        {
            this.Button1.IsEnabled = false;

            try
            {
                for (int i = 0; i < 10; i++)
                {
                    this.TextBox1.AppendText(i + "\n");
        #if true
                    // 非同期になるし、例外キャッチできる
                    await Task.Run(async () => HeavyProcess(i));
                    // コンパイラ警告が気になる場合は適当なawaitを追加
                    //await Task.Run(async () => {HeavyProcess(i); await Task.Yield();});
        #else
                    // 非同期になるが、例外キャッチできない
                    await Task.Run(() => HeavyProcess(i));
        #endif
                }
            }
            catch (Exception ex)
            {
                this.TextBox1.AppendText(ex.Message);
            }

            this.Button1.IsEnabled = true;
        }

        // Heavy Process
        void HeavyProcess(int count)
        {
            System.Threading.Thread.Sleep(1000);
            if (count >= 5) throw new ApplicationException("例外発生!!");
        }

非同期タスクをちゃんとasyncにしないとダメらしい。

正直よくわかってないので、間違いの指摘お願いします。



(2017-07-27 追記)

これはデバッグモード特有の挙動で、asyncにしなくても問題ないようです。
http://qiita.com/habu1010/items/08177698fa3826474c0b

VS2017だとデバッグでもちゃんと例外取得できてますね。

2014年11月25日火曜日

WPF勉強(4) フォルダ選択ダイアログの作成

  • .Net4.5
簡単に実装するなら FolderBrowserDialog を使えばよいのですが、なんかボタンが小さくてヤダ、WPFなのにFormのコントロールを呼び出しているのがヤダ、というわけで別の方法での実装します。

参照に追加するのは Micorosoft.WindowsAPICodePack と Microsoft.WindowsAPICodePack.Shell です。追加するにはNuGetで「Windows API Code Pack - Shell」をインストールしてください(Coreもインストールされます)。

// Button1 Click Event
private async void Button1_Click(object sender, RoutedEventArgs e)
{
    this.Button1.IsEnabled = false;

    try
    {
        for (int i = 0; i < 10; i++)
        {
            this.TextBox1.AppendText(i + "\n");
#if true
            // 非同期になるし、例外キャッチできる
            await Task.Run(async () => HeavyProcess(i));
            // コンパイラ警告が気になる場合は適当なawaitを追加
            //await Task.Run(async () => {HeavyProcess(i); await Task.Yield();});
#else
            // 非同期になるが、例外キャッチできない
            await Task.Run(() => HeavyProcess(i));
#endif
        }
    }
    catch (Exception ex)
    {
        this.TextBox1.AppendText(ex.Message);
    }

    this.Button1.IsEnabled = true;
}

// Heavy Process
void HeavyProcess(int count)
{
    System.Threading.Thread.Sleep(1000);
    if (count >= 5) throw new ApplicationException("例外発生!!");
}

参考URL
http://stackoverflow.com/questions/4007882/select-folder-dialog-wpf
http://arikalog.hateblo.jp/entry/2013/12/20/211641
 

2014年11月24日月曜日

WPF勉強(3) RichTextBoxで色付きログ表示

  • .Net4.5
ログ表示用のRichTextBoxアクセサクラスを作りました。
通常ログ(Log)はそのまま、エラーログ(LogError)は赤く表示します。

/// <summary>
/// RichTextBoxを色付きログ出力用に拡張
/// </summary>
public class LogTextBox
{
    public RichTextBox RichTextBox { set; get; }

    // コンストラクタ
    public LogTextBox(RichTextBox richTextBox)
    {
        RichTextBox = richTextBox;
    }

    // クリア
    public void Clear()
    {
        var paragraph = RichTextBox.Document.Blocks.LastBlock as Paragraph;
        paragraph.Inlines.Clear();
    }

    // テキスト追加
    public virtual void WriteLine(string text, Brush brush = null)
    {
        var paragraph = RichTextBox.Document.Blocks.LastBlock as Paragraph;

        // 書き込み
        if (brush != null)
        {
            // 色付きでテキスト追加
            var span = new Span { Foreground = brush };
            span.Inlines.Add(text + "\n");
            paragraph.Inlines.Add(span);
        }
        else
        {
            // そのままテキスト追加
            paragraph.Inlines.Add(text + "\n");
        }

        // 最終行にスクロール
        RichTextBox.ScrollToEnd();
    }

    // 通常ログ
    public void Log(object message)
    {
        WriteLine(message.ToString());
    }

    // 警告ログ
    public void LogWarning(object message)
    {
        WriteLine(message.ToString(), Brushes.Orange);
    }

    // エラーログ
    public void LogError(object message)
    {
        WriteLine(message.ToString(), Brushes.Red);
    }
}

RichTextBoxではFlowDocumetで内容が構成されており、その構成は複雑で、ちょっと色を付けるだけでも手間がかかります。

参考URL
http://msdn.microsoft.com/ja-jp/library/aa970779%28v=vs.110%29.aspx
http://noizy-radio.blogspot.jp/2013/02/wpfrichtextbox_22.html
http://blogs.wankuma.com/naka/archive/2008/07/13/148706.aspx

2014年11月23日日曜日

WPF勉強(2) 終了ボタンの実装

  • .Net4.5
[終了]ボタンを押した時にアプリが終わるようにします。

終了ボタンのXAML記述

WPFはxamlでウィンドウの配置等を記述します。これはデザインエディタと連動していて、エディタでグラフィカルに編集しても自動的にxamlに反映されます。

MainWindow.xaml
<window x:Class="CommandWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="560">
    <grid Margin="0,0,0,0">
        <textbox x:Name="TextBoxFolder" Height="23" Margin="10,10,90,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="フォルダを指定"/>
        <button x:Name="ButtonFolder" Content="フォルダ" Margin="0,10,10,0" VerticalAlignment="Top" Click="ButtonFolder_Click" HorizontalAlignment="Right" Width="75"/>
        <richtextbox x:Name="TextBoxLog" Margin="10,38,10,52" VerticalScrollBarVisibility="Visible" IsReadOnly="True">
            <flowdocument>
                <paragraph>
                    <run Text="ここに実行ログを出力"/>
                </Paragraph>
            </FlowDocument>
        </RichTextBox>
        <progressbar x:Name="ProgressBarRun" Margin="10,0,10,37" Height="10" VerticalAlignment="Bottom"/>
        <button x:Name="ButtonRun" Content="実行" Margin="0,0,90,8" Click="ButtonRun_Click" Height="24" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="75"/>
        <button x:Name="ButtonClose" Content="終了" Margin="0,0,10,8" Click="ButtonClose_Click" Height="24" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="75"/>
    </Grid>
</Window>

ほとんどの属性はエディタでぐりぐりやっていれば勝手に設定されるのですが、若干わかりにくい属性について説明します。

x:Name="ButtonClose"

この「名前」は、表示名(Content)ではなく、コードからコントロールにアクセスする変数名になります。

Click="ButtonClose_Click"

ボタンクリックしたときに呼ばれるメソッド名になります。エディタ上でボタンをダブルクリックすると自動で追加されますが、"(x:Name)_Click"というような名前に依存した呼出名になります。名前が定義されていない時は"Button_Click"という呼出名になるようです。


終了ボタンのコード実装

簡単かと思ったのですが、これぞという解説がされている情報を探しだすのに案外手間取りました。判ってしまえば簡単なんですけどね。自身のClose()を呼ぶだけでした。

MainWindow.xaml.csの一部
// アプリ終了
private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
    this.Close();
} 

URL
http://msdn.microsoft.com/ja-jp/library/bb655895%28v=vs.90%29.aspx

WPF勉強(1) なにか作ってみることにした

Visua lStudio Community 2013 でどう勉強しようか、ということでWPFアプリをなにか作ってみることにしました。


機能としては

・フォルダを指定する
・フォルダのすべてのファイルに対してコマンドを実行する

といった感じです。この手の作業はコマンドラインで用足りるのですが、勉強ということでWPFで作ってみます。


で、さっそく新規プロジェクトを作成し、ゴリゴリっとエディタでハリボテWindowを作ってみました。このあたりのツールはFormで作った時と似ていたのでなんとなく出来ました。



ちなみに私のスキルは

・C#:そこそこ
・Windowsプログラム能力:ほんの少し
・.NET:ほんの少し
・WPF:未知の領域

といった感じですが、さて、どうなるでしょう。

2014年11月22日土曜日

Visual Studio Community 2013 を Emacs キーバインドにする

  • VS2013


エディタをつかうとどうも指が勝手にEmacs操作してしまう、という悩みを解決するためにEmacsキーバインドを導入してみました。 調べてみたところ、こちらのサイトのやり方で出来ました!

Emacs Emulation Extension を Visual Studio 2012にインストールする
http://statemachine.hatenablog.com/entry/20130522/1369233834

違うのは「11.0にする」ところを「12.0にする」だけで、あとは同じです。
これでVisualStudio全体がおおよそEmacsキーバインドで操作できるようになりました。ただ、外部からのコピペが効かない等、ところどころ動作がおかしい部分があります。最近のバージョンではMicrosoftが公式にEmacsキーバインドをサポートしなくなったのも、どこかに無理が出ているからなのでしょうかね。

2014年11月21日金曜日

Visual Studio 2013 Professional版相当を無料で!

 

Express版ではありません!
「Visual Studio Community 2013」という名でProfessional版相当のVisualStudio製品の提供が開始されたんですよ奥さん!
ライセンスはちとややこしいけど、個人で使う範囲では無料です!

さあて、Windowsプログラムの勉強を再開するかな

URL
http://www.microsoft.com/ja-jp/dev/products/community.aspx
http://www.forest.impress.co.jp/docs/news/20141113_675880.html