帶DockPanel的透明TextBlock

Question

我想創建一個啓動畫面，其中圖像和加載狀態（帶進度條的文本塊）位於另一個之上。

我已經寫了下面的代碼：

<Window 
     WindowStyle="None" ResizeMode="NoResize" 
     d:DesignHeight="300" d:DesignWidth="300"> 
<DockPanel LastChildFill="True"> 
    <Grid DockPanel.Dock="Bottom" Background="Transparent"> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <TextBlock Text="{Binding Text}" Grid.Row="0" Background="Transparent"/> 
     <ProgressBar Maximum="100" Value="{Binding ProgressValue, Mode=OneWay}" Height="5" Grid.Row="1" IsIndeterminate="{Binding IsIndeterminate}"/> 
    </Grid> 
    <Image Source="{Binding ImageSource}" Stretch="None"/> 
</DockPanel> 

不幸的TextBlock還是刪除它位於頂部的圖像的某些部分。我認爲原因是DockPanel，但我不知道如何以其他方式做到這一點。

Answer 1

TextBlock不會刪除Image的一部分，因爲它不在其上面而是在下面。這是因爲DockPanel沒有把孩子放在彼此之上。如果你想要把內Grid上的Image那麼最簡單的方法頂部與Grid

<Grid> 
    <Image Source="{Binding ImageSource}" Stretch="None" /> 
    <Grid Background="Transparent" VerticalAlignment="Bottom"> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions>    
     <TextBlock Text="{Binding Text}" Grid.Row="0"/> 
     <ProgressBar Maximum="100" Value="{Binding ProgressValue, Mode=OneWay}" Height="5" Grid.Row="1" IsIndeterminate="{Binding IsIndeterminate}"/>    
    </Grid> 
</Grid> 

更換 DockPanel