Ouch@點部落

我不喜歡把事情搞得複雜，讓我們用簡單的方式分享經驗；我喜歡新奇的東西，讓我們用追逐時尚的心態學習新技術；來吧!!做就對了!!

2011-05-04

[WPF] 深入Binding - 透過StringFormat調整Binding資料的顯示格式

  • 11425
  • 0
  • RIA
  • 2013-07-15

在WPF中，通常我們會透過Binding來顯示資料；在.Net Framework3.5版之前，程式設計師可以透過實作IValueConverter的方式對每個要被繫結的屬性中透過String.Format()方法，來作出能以不同格式來顯示資料的功能。
但是，如果為了要配合UI而要為每個要被繫結的類別中的每個屬性去寫程式的話，那可能光一個應用程式中的屬性就得寫上好幾天了~
所幸，在.Net Framework 3.5 SP1之後，在XAML中也可以使用類似String.Format()方法的方式來設定資料的顯示格式(程式設計師總算可以輕鬆很多了!!)

 

在WPF中，通常我們會透過Binding來顯示資料；在.Net Framework3.5版之前，程式設計師可以透過實作IValueConverter的方式對每個要被繫結的屬性中透過String.Format()方法，來作出能以不同格式來顯示資料的功能。

但是，如果為了要配合UI而要為每個要被繫結的類別中的每個屬性去寫程式的話，那可能光一個應用程式中的屬性就得寫上好幾天了~

所幸，在.Net Framework 3.5 SP1之後，在XAML中也可以使用類似String.Format()方法的方式來設定資料的顯示格式(程式設計師總算可以輕鬆很多了!!)

 

先讓我們來看看範例吧(這次的範例很輕鬆，CodeBehind的cs檔是完全乾淨的，一行程式都不用寫~那Developer要幹嘛?去教Designer用StringFormat吧!!吐舌頭)~

(*若無法正常瀏覽本文WPF版範例，煩請參考[Windows7]使用IE9、FireFox與Chrome瀏覽WPF Browser Application(.XBAP)的方式一文調整瀏覽器設定)

對Designer來說，StringFormat這個屬性好像有點陌生，但是其實沒那麼恐怖啦，除了TextBlock等控制項得在Binding的同時設定之外，對於大部份的控制項，在Blend中就能輕鬆的設定喔!!(有圖有真相馬上回來~~)

Button

ComboBox

GroupBox
image image image

再來就看看這次的主角~落落長的XAML檔~

Page1.xaml

<Page 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:system="clr-namespace:System;assembly=mscorlib" x:Class="Wpf_BindingWithStringFormat.Page1" mc:Ignorable="d" d:DesignHeight="600"
        d:DesignWidth="700" Title="Page1">
    <Border BorderThickness="2" BorderBrush="#FF646464" CornerRadius="10" Background="White">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="WPF StringFormat 範例" FontSize="24" VerticalAlignment="Center"
                    Margin="5,10" Foreground="#FF646464" FontWeight="Bold" FontFamily="Microsoft JhengHei" d:IsLocked="True" />
            <Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="20,0" />
            <Viewbox Grid.Row="1" Margin="10,10,20,10" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2" d:IsLocked="True">
                <TextBlock TextWrapping="Wrap" Text="一般字串格式" FontSize="21.333" Foreground="#FF646464" FontWeight="Bold" FontStyle="Italic"
                        FontFamily="Microsoft JhengHei" />
            </Viewbox>
            <Viewbox Margin="10,10,20,10" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2" d:IsLocked="True">
                <TextBlock TextWrapping="Wrap" Text="數字格式" FontSize="21.333" Foreground="#FF646464" FontStyle="Italic" FontWeight="Bold"
                        FontFamily="Microsoft JhengHei" />
            </Viewbox>
            <Viewbox Grid.Row="3" Margin="10,10,20,10" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2" d:IsLocked="True">
                <TextBlock TextWrapping="Wrap" Text="日期格式" FontSize="21.333" Foreground="#FF646464" FontStyle="Italic" FontWeight="Bold"
                        FontFamily="Microsoft JhengHei" />
            </Viewbox>
            <Viewbox Grid.Row="4" Margin="10,10,20,10" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2" d:IsLocked="True">
                <TextBlock TextWrapping="Wrap" Text="其它控制項" FontSize="21.333" Foreground="#FF646464" FontStyle="Italic" FontWeight="Bold"
                        FontFamily="Microsoft JhengHei" />
            </Viewbox>
            <Grid Grid.Row="1" Margin="20,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Grid.ColumnSpan="10" Margin="0,0,0,20" d:LayoutOverrides="GridBox">
                    <TextBlock TextWrapping="Wrap" Text="請在文字方塊中輸入文字：" VerticalAlignment="Center" FontFamily="Microsoft JhengHei" FontSize="16"
                            Foreground="Black" />
                    <TextBox x:Name="txtTextBox1" TextWrapping="Wrap" VerticalAlignment="Center" MinWidth="250" FontFamily="Microsoft JhengHei"
                            FontSize="14.667" Background="#7F323232" Text="我是範例" />
                </StackPanel>
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="1" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="說明" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="加入特定文字" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="左右加上括弧" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="左邊加上空白" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="右邊加上空白" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="2" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="StringFormat" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="您輸入的是：&quot;{0}&quot;" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="({0})" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{}{0,15}" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{}{0,-15}" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="3" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="結果" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Text, ElementName=txtTextBox1, StringFormat=您輸入的是：\&quot;\{0\}\&quot;}"
                        Background="#3F646464" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Text, ElementName=txtTextBox1, StringFormat=(\{0\})}" Background="#3F646464"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Text, ElementName=txtTextBox1, StringFormat=\{0\,15\}}" Background="#3F646464"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Text, ElementName=txtTextBox1, StringFormat=\{0\,-15\}}" Background="#3F646464"
                        Foreground="Black" />
            </Grid>
            <Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="20,0" Grid.Row="1" Opacity="0.5" />
            <Grid Grid.Row="2" Margin="10" d:IsLocked="True" />
            <Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="20,0" Grid.Row="2" Opacity="0.5" />
            <Grid Grid.Row="3" Margin="10" d:IsLocked="True" />
            <Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="20,0" Grid.Row="3" Opacity="0.5" />
            <Grid Grid.Row="4" Margin="10" d:IsLocked="True" />
            <Grid Grid.Row="2" Margin="20,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" d:LayoutOverrides="GridBox" Grid.ColumnSpan="10">
                    <TextBlock TextWrapping="Wrap" Text="請移動滑桿：" VerticalAlignment="Center" FontFamily="Microsoft JhengHei" FontSize="16"
                            Foreground="Black" />
                    <Slider x:Name="sldSlider2" VerticalAlignment="Center" MinWidth="300" TickPlacement="TopLeft" TickFrequency="2" Minimum="-10"
                            Value="3.2" />
                </StackPanel>
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="1" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="說明" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以貨幣格式顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以百分比顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="使用自訂格式" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="使用無小數點的百分比顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="2" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="StringFormat" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="C" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="P" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="00.00" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="P0" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="3" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="結果" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Value, ElementName=sldSlider2, StringFormat=C}" Background="#3F646464"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Value, ElementName=sldSlider2, StringFormat=P}" Background="#3F646464"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Value, ElementName=sldSlider2, StringFormat=00.00}" Background="#3F646464"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding Value, ElementName=sldSlider2, StringFormat=P0}" Background="#3F646464"
                        Foreground="Black" />
            </Grid>
            <Grid Grid.Row="3" Margin="20,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" d:LayoutOverrides="GridBox" Grid.ColumnSpan="10">
                    <TextBlock TextWrapping="Wrap" Text="請選擇日期：" VerticalAlignment="Center" FontFamily="Microsoft JhengHei" FontSize="16"
                            Foreground="Black" />
                    <DatePicker x:Name="dtDatePicker1" Background="#7F323232" BorderThickness="2" BorderBrush="Black" SelectedDate="2010-05-03" />
                </StackPanel>
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="1" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="說明" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以月(文字) 日, 年 西元 顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以預設長時間格式顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以年/月/日顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="以月,年顯示" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="2" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="StringFormat" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="MMMM dd, yyyy g" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="G" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="yyyy/MM/dd" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="Y" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Grid.Row="3" HorizontalAlignment="Right" FontFamily="Microsoft JhengHei"
                        Text="結果" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding SelectedDate, ElementName=dtDatePicker1, StringFormat=MMMM dd\, yyyy g}"
                        Background="#3F646464" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="2" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding SelectedDate, ElementName=dtDatePicker1, StringFormat=G}"
                        Background="#3F646464" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding SelectedDate, ElementName=dtDatePicker1, StringFormat=yyyy/MM/dd}"
                        Background="#3F646464" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="4" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        FontFamily="Microsoft JhengHei" Text="{Binding SelectedDate, ElementName=dtDatePicker1, StringFormat=Y}"
                        Background="#3F646464" Foreground="Black" />
            </Grid>
            <Grid Grid.Row="4" Margin="20,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="14.63" />
                    <RowDefinition Height="0.667*" />
                </Grid.RowDefinitions>
                <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Microsoft JhengHei" Text="Button"
                        Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Microsoft JhengHei"
                        Text="ComboBox" Foreground="Black" />
                <TextBlock TextWrapping="Wrap" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Microsoft JhengHei"
                        Text="GroupBox" Foreground="Black" />
                <Button Margin="10,10,10,9.999" d:LayoutOverrides="Height" Grid.Row="1" ContentStringFormat="{}{0:C0}">
                    <system:Int32>5227</system:Int32>
                </Button>
                <ComboBox Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="10,0" Opacity="0.75" Language="zh-TW"
                        ItemStringFormat="價格:{0:C0}">
                    <system:Int32>123</system:Int32>
                    <system:Int32>456</system:Int32>
                    <system:Int32>789</system:Int32>
                </ComboBox>
                <GroupBox Header="阿猴" d:LayoutOverrides="Height" Grid.Row="1" Grid.Column="2" Margin="10" Opacity="0.75" ContentStringFormat="D"
                        HeaderStringFormat="{}{0}的生日" Language="zh-TW" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                        Padding="10">
                    <system:DateTime>
                        1985/07/16
                    </system:DateTime>
                </GroupBox>
            </Grid>
        </Grid>
    </Border>
</Page>

從上面的XAML中我們可以發現，除了單純的透過StringFormat屬性來處理資料的格式之外，也可以透過Language屬性來讓資料直接以指定的語系格式顯示喔!!

如果需要更詳細的StringFormat參考資料的話，也可以參考以下連結：

Trying out Binding.StringFormat

WPF 3.5 SP1 feature: StringFormat

再來是MSDN上對String.Format()方法的介紹：

Formatting Types

Composite Formatting

Standard Date and Time Format Strings

Custom Date and Time Format Strings

Standard Numeric Format Strings

Custom Numeric Format Strings

Enumeration Format Strings

 

依照慣例，總是要來個專案原始檔作為Ending，請自行服用~