amwx
ContentDialog Border#BackgroundElement has hardcoded margin
Hi, Border#BackgroundElement within ContentDialog template has harcoded margin (v2.3.0), which cannot be customized by styles because it is always overriden from the template. The margin was not hardcoded in the v2.0.5. I have got prepared PR if you are interested (I do not have permissions to push it).
<Thickness x:Key="ContentDialogMargin">100</Thickness>
...
<ControlTheme x:Key="{x:Type ui:ContentDialog}" TargetType="ui:ContentDialog">
...
<Setter Property="Margin" Value="{DynamicResource ContentDialogMargin}" />
...
<Setter Property="Template">
<ControlTemplate>
<Border Name="Container">
<Panel Name="LayoutRoot"
Background="{DynamicResource ContentDialogSmokeFill}">
<Border Name="BackgroundElement"
...
Margin="{TemplateBinding Margin}"
...>
So that margin was added because I had to switch from the BoxShadow to the new Effect DropShadow and in order to make sure that shows up that margin must be present. Now, 100 in all directions is a little extreme and probably should be cut back to just enough to show the shadow. Why do you need this margin removed? Is there a visual issue? I'm hesitant to allow customizing it simply because the drop shadow effect depends on it.
We need to customize the margin because width of our main window is 500 px so the content dialog width is small and it does not look good with the current 100 px margin settings. We need to set the margin to at least 25 px. I am ok with the default margin value set to 100 but I would like to be able to change it by custom styles if needed.
I think it could just be a DynamicResource. That way it's a one liner to adjust.
Just as a side note, if you need the margin removed before a (potential) change gets merged, it is possible to do so by a hack, taking advantage of the fact that Animation has a higher priority than LocalValue:
<!-- This is an ugly workaround to override the LocalValue in ContentDialog (100) with a higher priority setter -->
<Style Selector="controls|ContentDialog /template/ Border#BackgroundElement">
<Style.Animations>
<Animation IterationCount="1" Duration="0:0:1" FillMode="Both">
<KeyFrame Cue="0%">
<Setter Property="Margin" Value="24" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Margin" Value="24" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
We use this in production and it works fairly well, though it is quite ugly. As for why we needed it removed, very similar reason to OP: we use ContentDialogs as confirmation windows raised in other window-based popups which are sized to content and often too small to fit 200 px of margins + the dialog itself.
100 is definitely too big and I'm not sure why I chose that to be honest - probably just forgot to change it.
How does this look? This is: Margin="14 14 14 22" which is just big enough for the drop shadow without it getting cut off.
I'm still hesitant to allow customization on this via resource because of the purpose it serves, however, I think this new margin is much nicer and less intrusive (and actually smaller than what is presented above in the workarounds.
100 is definitely too big and I'm not sure why I chose that to be honest - probably just forgot to change it.
How does this look? This is:
Margin="14 14 14 22"which is just big enough for the drop shadow without it getting cut off.
I'm still hesitant to allow customization on this via resource because of the purpose it serves, however, I think this new margin is much nicer and less intrusive (and actually smaller than what is presented above in the workarounds.
It looks much better and it is usable for us.