wpf兩種佔位符實現方式

米蘭的小銅匠發表於2017-09-04

方式一:通過設定樣式style

在app.xaml 中加入以下樣式配置:

        <Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <TextBox Padding="10,0,0,0" VerticalContentAlignment="Center" Text="{Binding Path=Text,
                                                RelativeSource={RelativeSource TemplatedParent}, 
                                                Mode=TwoWay,
                                                UpdateSourceTrigger=PropertyChanged}"
                                 x:Name="textSource" 
                                 Background="Transparent" 
                                 Panel.ZIndex="2" />
                            <TextBox Padding="10,0,0,0" VerticalContentAlignment="Center"  Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1">
                                <TextBox.Style>
                                    <Style TargetType="{x:Type TextBox}">
                                        <Setter Property="Foreground" Value="Transparent"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
                                                <Setter Property="Foreground" Value="LightGray"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>  

這個樣式中grid內有兩個textbox,第一個textbox 的Zindex=“2”,接受textbox控制元件的內容,第二個textbox的Zindex=“1”,接受來時tag的佔位字元。在頁面中這樣引用:

        <TextBox x:Name="txtPlaceHolder1" Padding="10,10,0,0"  Text="" Width="468" FontSize="32" Height="72" Style="{StaticResource placeHolder}" Tag="佔位符1,通過style實現"> </TextBox>

會有這樣的效果:



方式二:不設定樣式,c#程式碼實現

程式碼略長,下面會放原始碼

使用方法: 引入controls名稱空間,

        <TextBox x:Name="txtPlaceHolder2" VerticalContentAlignment="Center" Padding="10,0,0,0" controls:PlaceholderManager.Placeholder="佔位符2,通過C#程式碼實現" Width="468" FontSize="32" Height="72" Margin="0,10,0,0"></TextBox>
效果如圖:

程式碼 下載


相關文章