locked
SettingsFlyoutSectionStyle vs WinRTXAMLValidation

    Question

  • I've been happily using the WinRTXAMLValidation library in a Store app for form field validation.

    Today though I've added a SettingsFlyout on which I need to include validation and the styles are unfortunately conflicting. I haven't had enough experience with XAML styling to figure out how I can change/extend it so that my controls don't have a white border on a white background when inside a ValidationPanel?

    Thanks in advance of any pointers you can provide.

    Below is the ValidationsStyles.xaml

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vc="using:WinRTXAMLValidation.Library.Controls">
    
        <Color x:Key="ColorValidationError">#FFFF0000</Color>
        <Color x:Key="ColorValidationWarning">#FFFF9900</Color>
    
        <Style x:Key="ValidationMessageStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Typography.StylisticSet20" Value="True"/>
            <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
            <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
        </Style>
        
        <Style x:Key="ValidationErrorMessageStyle" TargetType="TextBlock" BasedOn="{StaticResource ValidationMessageStyle}">
            <Setter Property="Foreground" Value="{StaticResource ColorValidationError}"/>
        </Style>
    
        <Style x:Key="ValidationWarningMessageStyle" TargetType="TextBlock" BasedOn="{StaticResource ValidationMessageStyle}">
            <Setter Property="Foreground" Value="{StaticResource ColorValidationWarning}"/>
        </Style>
    
        <Style x:Key="ValidationSummaryHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource ValidationMessageStyle}">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="{StaticResource ColorValidationError}"/>
        </Style>
    
        <Style TargetType="vc:ValidationPanel">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="vc:ValidationPanel">
                        <Grid>
                            <StackPanel Orientation="Vertical">
                                <Border x:Name="ValidationBorder" HorizontalAlignment="Left" BorderThickness="0">
                                    <ContentPresenter />
                                </Border>
                                <!--<Grid Visibility="{Binding ShowValidationResults, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}">-->
                                <vc:PropertyValidationTextBlock x:Name="ValidationSummary" Visibility="Collapsed"
                                                                ValidationSource="{TemplateBinding ValidationSource}"
                                                                ShowValidationMessages="{TemplateBinding ShowValidationMessages}"
                                                                ShowGroupValidationMessages="{TemplateBinding ShowGroupValidationMessages}"
                                                                ShowPropertyValidationMessages="{TemplateBinding ShowPropertyValidationMessages}"/>
                                <!--</Grid>-->
                            </StackPanel>
    
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Valid" />
                                    <VisualState x:Name="Error">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ColorValidationError}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationSummary" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Warning">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ColorValidationWarning}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationSummary" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
    

    Monday, June 09, 2014 12:11 PM

All replies

  • Hi,

    Because the WinRTXAMLValidation is the 3th part product so I cannot test your project. But accroding to your description you want to change the ValidationPanel border's color. If so, you can define a BorderBrush in your ValidationPanel's ValidationBorder:

     <Border x:Name="ValidationBorder" HorizontalAlignment="Left" BorderThickness="0" BorderBrush="Blue">
                <ContentPresenter />
            </Border>

    Or you can define a setter in your ValidationPanel style:

    <Setter Property="BorderBrush" Value="Blue"/>

    Then binding the setter:

    <Border x:Name="ValidationBorder" HorizontalAlignment="Left" BorderThickness="0" BorderBrush="{TemplateBinding BorderBrush}">
                <ContentPresenter />
            </Border>
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, June 10, 2014 2:40 AM
  • Thanks Anne.
    It's the controls nested inside the ValidationPanel controls I wish to override the styling on.
    I believe the ValidationPanel is adding its own style to the nested controls which conflicts with the default background colour.
    Thanks for the tips though, I'll try applying a BorderBrush to the nested controls.
    Tuesday, June 10, 2014 9:36 AM