效果圖預覽 新建UserControl <Border Background="#F3F6F9" Height="50" Width="400" CornerRadius="10" HorizontalAlignment="Stretch"> <Grid Height="Auto"> <Grid.C ...
效果圖預覽
新建UserControl
<Border Background="#F3F6F9" Height="50" Width="400" CornerRadius="10" HorizontalAlignment="Stretch"> <Grid Height="Auto"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--請將 Image 的屬性 Source 修改為自己的項目路徑--> <Image Source="/Sample;component/Resources/search.png" Width="25" Stretch="Uniform"/> <TextBox Grid.Column="1" x:Name="searchQuery" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" TextAlignment="Left" BorderThickness="0" Background="Transparent"/> <TextBlock Grid.Column="1" Margin="3,0,0,0" Text="請輸入搜索內容..." FontWeight="Bold" HorizontalAlignment="Left" TextAlignment="Left" VerticalAlignment="Center" Foreground="LightGray" IsHitTestVisible="False"> <TextBlock.Style> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Visibility" Value="Collapsed"/> <Style.Triggers> <DataTrigger Binding="{Binding Text, ElementName=searchQuery}" Value=""> <Setter Property="Visibility" Value="Visible"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </Grid> </Border>
必讀:請將 Image 的屬性 Source 修改為自己的項目路徑
將 search.png 保存到項目中設置 必讀:生成操作修改Resource