2017-07-25 122 views
0

我有一個圓角邊框,我試圖讓它的內容也是圓角的,但是我的嘗試不起作用。基本上我正在做一種自定義的MessageBox,但更簡單,只有一個圖像圖標,一個文本和一個按鈕。沒有標題欄。圖像圖標正在改變,取決於消息的類型。WPF:圓角邊框的內容不是圓角的

Stackpanel的邊角重疊在邊框上,所以邊框的角不顯示爲圓角。

未遂#1

<Border x:Name="MyCustomMessageBox" 
     CornerRadius="5,5,5,5" 
     Grid.ZIndex="3" 
     Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"     
     Width="auto" Height="auto" 
     HorizontalAlignment="Center" 
     VerticalAlignment="Center" 
     BorderBrush="DarkBlue" BorderThickness="1" 
     Background="White"> 
    <Border.Effect> 
     <DropShadowEffect /> 
    </Border.Effect> 
    <Grid Background="Blue"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
      <RowDefinition Height="50"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke"> 
      <Grid> 
       <Image VerticalAlignment="Center" HorizontalAlignment="Left" 
        Source="/Common.MyImages;component/Images/Info.png" 
        Height="48" Width="48" Margin="20,10"> 
        <Image.Style> 
         <Style TargetType="{x:Type Image}"> 
          <Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding MsgType}" Value="1"> 
            <Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </Image.Style> 
       </Image> 
      </Grid> 
      <TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left" 
         Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/> 
      </TextBlock> 
     </StackPanel> 
     <Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0" 
       Click="btnCustomMessageBox_Click" 
       HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/> 
    </Grid> 
</Border> 

未遂#2: 作爲解釋here,我也但沒有成功嘗試。

<Grid> 
    <Grid.OpacityMask> 
     <VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" /> 
    </Grid.OpacityMask> 

    <!-- Here goes all the above border code --> 

</Grid> 
+0

您鏈接的答案有很多提供的解決方案,您是否嘗試過所有? – Evk

回答

1

以下內容應該可以解決您的問題。

<Border x:Name="MyCustomMessageBox" 
     CornerRadius="5" 
     Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}" 
     Width="auto" Height="auto" 
     HorizontalAlignment="Center" 
     VerticalAlignment="Center" 
     BorderBrush="DarkBlue" 
     BorderThickness="1" 
     Background="blue"> 
    <Border.Effect> 
     <DropShadowEffect /> 
    </Border.Effect> 
    <Grid> <!-- removed the Background here. Only letting borders provide background. --> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
      <RowDefinition Height="50"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <!-- 
       Added a border to fill the top part of the grid with the 
       whitesmoke color using a borderradius on the top. 
       Also note that the Background from the stackpanel was removed. 
     --> 
     <Border 
      Grid.Row="0" Grid.Column="0" 
      Name="mask" 
      Background="WhiteSmoke" 
      CornerRadius="5,5,0,0" 
     /> 
     <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal"> 
      <Grid> 
       <Image VerticalAlignment="Center" HorizontalAlignment="Left" 
         Source="/Common.MyImages;component/Images/Info.png" 
         Height="48" Width="48" Margin="20,10"> 
        <Image.Style> 
         <Style TargetType="{x:Type Image}"> 
          <Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding MsgType}" Value="1"> 
            <Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </Image.Style> 
       </Image> 
      </Grid> 
      <TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left" 
         Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/> 
      </TextBlock> 
     </StackPanel> 
     <Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0" 
       Click="btnCustomMessageBox_Click" 
       HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/> 
    </Grid> 
</Border>