Hatena::ブログ(Diary)

Yuya Yamaki’s blog このページをアンテナに追加 RSSフィード Twitter

2008年05月27日(火曜日)

WPF 3.5 SP1の新機能 - StringFormat

Lester’s WPF blog : WPF 3.5 SP1 feature: StringFormat


これまでWPFではバインディングした値に対して書式を設定するという機能は用意されていませんでした。そのため、たとえば100という値を100円と表示したいといった場合には、そのためだけにConverterを作成するか、あるいはテンプレートをそのように書き換えるといった方法で対応する必要がありました。


WPF 3.5 SP1には、BindingBaseにStringFormatプロパティが用意されており、これを使って簡単な書式が設定できるようになっています。


Visual Basic

Class Window1
 
    Public Class Data
 
        Private _date As DateTime
        Private _int As Integer
 
        Public Property TestDate() As DateTime
            Get
                TestDate = _date
            End Get
            Set(ByVal value As DateTime)
                _date = value
            End Set
        End Property
 
        Public Property TestInt() As Integer
            Get
                TestInt = _int
            End Get
            Set(ByVal value As Integer)
                _int = value
            End Set
        End Property
 
        Public Sub New(ByVal _date As DateTime, ByVal _int As Integer)
            TestDate = _date
            TestInt = _int
        End Sub
 
    End Class
 
    Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        Dim testData As New Data(DateTime.Today, 3333)
        Window1.DataContext = testData
 
        Dim testCollectionData As New ObjectModel.ObservableCollection(Of Data)
        testCollectionData.Add(New Data(DateTime.Today, 3333))
        ListView1.ItemsSource = testCollectionData
 
    End Sub
 
End Class


XAML

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   Title="Window1" Height="300" Width="300" Name="Window1">
    <StackPanel>
        <TextBox Text="{Binding Path=TestDate, StringFormat=D}"/>
        <TextBox Text="{Binding Path=TestDate, StringFormat=D}" Language="ja-JP"/>
        <TextBox Text="{Binding Path=TestDate, StringFormat=yyyy年MM月dd日}"/>
        <TextBox Text="{Binding Path=TestDate, StringFormat=ggyy年MM月dd日}"/>
        <TextBox Text="{Binding Path=TestDate, StringFormat=ggyy年MM月dd日}" Language="ja-JP"/>
 
        <TextBox Text="{Binding Path=TestInt, StringFormat=金額: {0:C}}"/>
        <TextBox Text="{Binding Path=TestInt, StringFormat=金額: {0:C}}" Language="ja-JP"/>
 
        <ListBox ItemStringFormat="P">
            <sys:Double>0.23</sys:Double>
            <sys:Double>0.46</sys:Double>
        </ListBox>
 
        <Expander Content="{Binding TestInt}" ContentStringFormat="X"/>
 
        <ListView Name="ListView1">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="日付" DisplayMemberBinding="{Binding Path=TestDate, StringFormat=D}"/>
                    <GridViewColumn Header="金額" DisplayMemberBinding="{Binding Path=TestInt, StringFormat={}{0}円}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </StackPanel>
</Window>


f:id:Yamaki:20080527164116p:image


2008年05月26日(月曜日)

Visual Studio 2008 Service Pack 1 Beta - WPFデザイナ新機能

Microsoft ダウンロード センター: Windows、Office、Xbox、その他

no title

no title


少し前になりますが、Visual Studio 2008と.NET Framework 3.5のSP1 Betaがリリースされました。SP1ですが、内容はサービスパックレベルではなくたくさんの新機能が含まれています。今回は、主にWPFデザイナ周りの新機能を中心に紹介したいと思います。


WPFデザイナ

  • [プロパティウィンドウ]がアルファベット順にソートできるようになった。
    f:id:Yamaki:20080526164252p:image


  • [プロパティウィンドウ]に[イベント]が追加された。
    f:id:Yamaki:20080526164656p:image
  • マージンを取った状態で吸着&スナップラインが表示されるようになった。
    f:id:Yamaki:20080526170437p:image


TabControl

  • TabControlをデザイナ上に配置すると、自動的にTabItemがひとつ作成される。
  • コンテキストメニューの[タブの追加]からTabItemを追加すると、HeaderがTabItem+数字に自動的に設定される(以前は何も設定されなかった)。
  • 複数のTabItemがある場合に、TabItemのHeader部分をクリックすることでTabItemを切り替えてデザインできる。


Expander

  • Expanderをデザイナ上に配置すると、自動的にコンテンツとしてGridも配置される。
  • デザイン時のみ自動的にIsExpandedプロパティがTrueに設定されるため、コンテンツ部分もそのままデザイナを使ってデザインできる。


コードウィンドウ

  • XAMLで宣言されているオブジェクトへコンテキストメニューからの[定義へ移動]が可能になった。


ちなみに、重要な点ではありませんが、Visual Studio 2008のアイコンがSP1から少し代わっています。ソリューションファイルのアイコンなどと同じようにVisual Studioのバージョンを示す9が追加されました。

f:id:Yamaki:20080526160457p:image


2008年05月19日(月曜日)

Blendでデザイン時の幅と高さを指定する機能

Page not found – Designers Love


Expression Blend 1.0(以下、Blend)とExpression Blend 2(以下、Blend 2)では、WPFのコントロールライブラリ(ユーザーコントロール)のプロジェクトを新規作成したときの「UserControl1.xaml」の内容が、下記のように異なっています。


Blend

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UserControl1"
    x:Name="UserControl"
    Width="640" Height="480">
 
    <Grid x:Name="LayoutRoot"/>
</UserControl>


Blend 2

<UserControl
    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"
    mc:Ignorable="d"
    x:Class="UserControl1"
    x:Name="UserControl"
    d:DesignWidth="640" d:DesignHeight="480">
 
    <Grid x:Name="LayoutRoot"/>
</UserControl>


違いを見比べていただくと、Blend 2のUserControl部分ではWidthとHeightが指定されておらず、代わりにDesignWidthとDesignHeightが指定されていることが分かるかと思います。これらは、以前の投稿でご紹介したXAML Readerに無視されるmc:Ignorable属性を使ったものになっており、実行時にはまったく影響を及ぼさないものです。


UserControlのような汎用的に利用する要素の場合、WidthとHeightは固定値を指定せずにAutoにしておくことが多いかと思います。しかしながら、BlendでUserControlのWidthとHeightを指定しない(つまり、WidthとHeightをAutoに設定した)場合、たとえば下記のようなXAMLは


<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.5*"/>
        <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>
    <Button/>
    <TextBox Grid.Row="1"/>
</Grid>


このように表示されてしまうため、非常にデザインしずらい状態になってしまいます。

Blend

f:id:Yamaki:20080519115548p:image


おそらくは暫定的にWidthとHeightを指定しておき、最後にそれらを削除するという手法を取っていた方が多かったのではないでしょうか。


Blend 2でDesignWidthとDesignHeightをそれぞれ300に設定した状態のデザイナの表示は下記のようになります。

Blend 2

f:id:Yamaki:20080519115656p:image


これでもう暫定的にWidthとHeightを指定しておく必要はありません。


2008年05月07日(水曜日)

WPFにあってSilverlight 2 Betaにないシリーズ「Binding.ElementNameプロパティ」

Binding.ElementName プロパティ (System.Windows.Data)

このプロパティは、アプリケーション内の別の要素のプロパティにバインドするときに役立ちます。たとえば、Sliderを使用してアプリケーション内の別のコントロールの高さを制御する場合や、コントロールのContentをListBoxコントロールのSelectedValueプロパティにバインドする場合に指定します。


たとえば、ElementNameプロパティを使うことで、SliderのValueプロパティとTextBoxのTextプロパティをバインドさせることができました。


XAML( WPF )

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300">
    <StackPanel Margin="5">
        <TextBox Name="textBox"/>
        <Slider Value="{Binding ElementName=textBox, Path=Text}" Maximum="100" />
    </StackPanel>
</Window>


Silverlight 2 BetaにはBindingクラスにElementNameプロパティがありませんので、上記のような書き方はできません。しかしながら、下記のblogにてヘルパークラスを作成する方法で要素間バインディングを実現する方法が掲載されていましたので、それを紹介したいと思います。

Workaround for missing ElementName in Silverlight 2.0 Binding


同じコードを書いても仕方がないので、ここではいつものようにVisual Basicのコードに書き直したものを載せておきます。


Visual Basic( Silverlight 2 Beta )

Imports System.ComponentModel
 
Public Class BindingHelper
    Implements INotifyPropertyChanged
 
    Private _value As Object
 
    Public Property Value() As Object
        Get
            Value = _value
        End Get
        Set(ByVal value As Object)
            _value = value
            OnPropertyChanged("Value")
        End Set
    End Property
 
    Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
 
    Protected Overridable Sub OnPropertyChanged(ByVal propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub
 
End Class


XAML( Silverlight 2 Beta )

<UserControl x:Class="BindingHelperSample.Page"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:src="clr-namespace:BindingHelperSample"
   Width="400" Height="300">
    <StackPanel Margin="5" Background="White">
        <StackPanel.Resources>
            <src:BindingHelper x:Key="bindingHelper" />
        </StackPanel.Resources>
        <TextBox Text="{Binding Value, Source={StaticResource bindingHelper}}" />
        <Slider Value="{Binding Value, Source={StaticResource bindingHelper}, Mode=TwoWay}" Maximum="100" />
    </StackPanel>
</UserControl>


f:id:Yamaki:20080507151515p:image