CustomMessageBox使用总结
开发过程中难免要使用到消息框,然而系统提供的MessageBox却难以满足许多需求。一、MessageBox的背景颜色无法更改,这就无法满足需求要求的消息框颜色。二、MessageBox的提示形式过于单一,难以满足包含ListPicker、CheckBox等方式的弹出框,而CustomMessageBox的模版中包含了ContentPresenter,可以承载各种各样的内容控件。在多方面考虑之后,于是决定选择Toolkit的CustomMessageBox作为应用的弹出提示框。
然而在使用过程中发现CustomMessageBox还是存在些许问题的。
首先,当应用的SystemTray系统托盘的Opacity(透明度)为0的时候,消息框弹出的时候系统托盘仍然是透明的,很难看有木有啊!
为了处理掉这个问题,不得不对CustomMessageBox进行重载。
double oldOpacity; public MyCustomMessageBox(): base() { this.Dismissed += MyCustomMessageBox_Dismissed; } void MyCustomMessageBox_Dismissed(object sender, DismissedEventArgs e) { SystemTray.Opacity = oldOpacity; } public void Show() { oldOpacity = SystemTray.Opacity; SystemTray.Opacity = 1;
this.Show(); }
然而,这还是比较小的问题。需求要求的消息框是要不受系统的主题背景影响的,而CustomMessageBox的遮罩背景却会在手机主题背景为白色的时候,遮罩背景变成透明的淡白色,这与应用自身设计的皮肤太不搭调了,很难看。这要如何处理掉呢?查看了CustomMessageBox的模版,发现模版中并没有有关于遮罩背景的部分。
<Style TargetType="controls:CustomMessageBox"> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/> <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/> <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/> <Setter Property="Margin" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="controls:CustomMessageBox"> <Grid Background="{TemplateBinding Background}" HorizontalAlignment="Stretch"> <Grid Width="480" HorizontalAlignment="Left"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <StackPanel Grid.ColumnSpan="2" Margin="0,0,0,18"> <TextBlock x:Name="TitleTextBlock" Text="{TemplateBinding Title}" Foreground="{TemplateBinding Foreground}" Visibility="Collapsed" Margin="24,16,24,-6" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/> <TextBlock x:Name="CaptionTextBlock" Text="{TemplateBinding Caption}" Foreground="{TemplateBinding Foreground}" Visibility="Collapsed" Margin="24,8,24,0" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" TextWrapping="Wrap" HorizontalAlignment="Left"/> <TextBlock x:Name="MessageTextBlock" Text="{TemplateBinding Message}" Foreground="{TemplateBinding Foreground}" Margin="24,11,24,0" Visibility="Collapsed" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" TextWrapping="Wrap" HorizontalAlignment="Left"/> <ContentPresenter Margin="12,0,0,0"/> </StackPanel> <Button x:Name="LeftButton" Grid.Row="1" Grid.Column="0" Content="{TemplateBinding LeftButtonContent}" IsEnabled="{Binding IsLeftButtonEnabled}" Foreground="{TemplateBinding Foreground}" Margin="12,0,0,12" Visibility="Collapsed" controls:TiltEffect.IsTiltEnabled="True"/> <Button x:Name="RightButton" Grid.Row="1" Grid.Column="1" Content="{TemplateBinding RightButtonContent}" IsEnabled="{Binding IsRightButtonEnabled}" Foreground="{TemplateBinding Foreground}" Margin="0,0,12,12" Visibility="Collapsed" controls:TiltEffect.IsTiltEnabled="True"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
无奈之中只好去看CustomMessageBox的源码,最终发现遮罩的这一层原来是这样实现的。首先创建一个Grid容器,然后再创建一个Rectangle对象作为遮罩层,并且Fill值为系统的PhoneBackgroundColor这个值。将遮罩层Add到Grid容器中,将弹出框Add到Grid容器中,最后在将Grid容器添加到Popup然后弹出。那么可不可以这样做呢,在后台中找到遮罩的Rectangle,将其Fill固定下来。
public void Show() { oldOpacity = SystemTray.Opacity; SystemTray.Opacity = 1; this.Show(); //获取Grid容器 Grid container = this.Parent as Grid; //可视化树中查找Rectangle遮罩层 Rectangle rec = BV_ToolAPI.FindFirstChildOfType<Rectangle>(container); rec.Fill = new SolidColorBrush(Color.FromArgb(0x99, 0, 0, 0)); }
Ok,这样,CustomMessageBox就不会再根据系统的主题背景颜色而变化了。