如何拉伸 Callisto CustomDialog 的内容？答案

【问题标题】：How to stretch the content of Callisto CustomDialog?如何拉伸 Callisto CustomDialog 的内容？
【发布时间】：2014-02-12 18:36:36
【问题描述】：

我很难弄清楚 CustomDialog 如何确定其内容的宽度。附加的是从 Callisto 的测试应用程序复制的代码，添加了两个 HorizontalAlignment="Stretch"。什么都没有延伸。我想拉伸内容（例如 StackPanel）。我还尝试为 StackPanel 的 Width 属性分配一个值。似乎 CustomDialog 有一些算法来选择最大宽度。无论你做什么，它的内容都不会超过那个宽度。有人可以对此有所了解吗？

<!-- Example use of the CustomDialog control -->
<callisto:CustomDialog x:FieldModifier="public" x:Name="LoginDialog" 
                    Title="Bacon Terms and Conditions" 
                    Background="Teal" BackButtonVisibility="Visible" BackButtonClicked="LoginDialog_BackButtonClicked_1"
                    HorizontalAlignment="Stretch">
    <StackPanel HorizontalAlignment="Stretch">
        <TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" TextWrapping="Wrap">
        Bacon sausage frankfurter tenderloin turkey salami andouille bresaola. Venison salami prosciutto, pork belly turducken tri-tip spare ribs chicken strip steak fatback shankle tongue boudin andouille. Meatloaf salami pork ground round turkey jerky meatball ball tip, filet mignon fatback flank prosciutto shank. Turkey boudin ham hock, filet mignon tri-tip bresaola tongue venison spare ribs meatloaf flank beef pancetta. Leberkas turducken flank ground round biltong chuck bacon kielbasa. Beef pastrami meatball, short loin venison swine pork loin shank meatloaf spare ribs.
        </TextBlock>
        <CheckBox Margin="0,0,0,8" Foreground="White" Content="I agree to the Terms and Conditions of Bacon" />
        <TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" Text="Enter your name for acceptance" />
        <callisto:WatermarkTextBox HorizontalAlignment="Left" Watermark="Type your name" Width="400" Height="35" />
        <StackPanel Margin="0,20,0,0" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Content="OK" Width="90" Margin="0,0,20,0" />
            <Button Content="CANCEL" Width="190" Click="DialogCancelClicked" />
        </StackPanel>
    </StackPanel>
</callisto:CustomDialog>

【问题讨论】：

试试HorizontalContentAlignment="Stretch"
我刚刚按照您的提示进行了尝试。不幸的是，它没有任何区别。
接下来要尝试的是使用Grid 而不是StackPanel。 StackPanels 通常在请求尽可能多的空间时遇到问题。 Grids 没有这个问题。
我在提问之前尝试了 Grid。这次我刚刚用 CustomDialog 的 HorizontalContentAlignment="Stretch" 再次尝试了。不幸的是，它保持不变。
从阅读源代码来看，他的Style 似乎并没有使ContentPresenter 继承模板父级的ContentAlignment 属性。我正在添加一个可能的解决方案作为答案，因为它太大而无法放在这里。

标签： windows-store-apps customdialog callisto

【解决方案1】：

目前，默认样式似乎不支持这一点。 Here is the current default style (based on the GitHub).

    <Style TargetType="local:CustomDialog">
    <Setter Property="IsOpen" Value="False" />
    <Setter Property="BorderThickness" Value="{ThemeResource CustomDialogBorderThemeThickness}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource CustomDialogBorderThemeBrush}" />
    <Setter Property="BackButtonVisibility" Value="Collapsed" />
    <Setter Property="Background" Value="{ThemeResource CustomDialogBackgroundThemeBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomDialog">
                <Popup x:Name="PART_RootPopup" IsLightDismissEnabled="False" IsOpen="{TemplateBinding IsOpen}">
                    <Grid x:Name="PART_RootGrid" Background="#72000000">
                        <Border x:Name="PART_BannerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="Center">
                            <Grid x:Name="PART_DialogGrid" Background="{TemplateBinding Background}" VerticalAlignment="Center">
                                <Grid.Resources>
                                    <Style x:Key="DialogBackButtonStyle" TargetType="Button">
                                        <Setter Property="MinWidth" Value="0"/>
                                        <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
                                        <Setter Property="FontWeight" Value="Normal"/>
                                        <Setter Property="FontSize" Value="26.66667"/>
                                        <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
                                        <Setter Property="AutomationProperties.Name" Value="Back"/>
                                        <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Button">
                                                    <Grid x:Name="RootGrid" Width="30" Height="30">
                                                        <Grid Margin="-3,-5,0,0">
                                                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}"/>
                                                            <TextBlock x:Name="NormalGlyph" Text="{ThemeResource SettingsFlyoutBackButtonGlyph}" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
                                                            <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}" Opacity="0"/>
                                                        </Grid>
                                                        <Rectangle
                        x:Name="FocusVisualWhite"
                        IsHitTestVisible="False"
                        Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                        StrokeEndLineCap="Square"
                        StrokeDashArray="1,1"
                        Opacity="0"
                        StrokeDashOffset="1.5"/>
                                                        <Rectangle
                        x:Name="FocusVisualBlack"
                        IsHitTestVisible="False"
                        Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                        StrokeEndLineCap="Square"
                        StrokeDashArray="1,1"
                        Opacity="0"
                        StrokeDashOffset="0.5"/>

                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name="CommonStates">
                                                                <VisualState x:Name="Normal" />
                                                                <VisualState x:Name="PointerOver">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BackButtonPointerOverBackgroundThemeBrush}"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Pressed">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="ArrowGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="NormalGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Disabled">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                            </VisualStateGroup>
                                                            <VisualStateGroup x:Name="FocusStates">
                                                                <VisualState x:Name="Focused">
                                                                    <Storyboard>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualWhite"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualBlack"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Unfocused" />
                                                                <VisualState x:Name="PointerFocused" />
                                                            </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="1" VerticalAlignment="Center">
                                    <StackPanel Margin="13,19,13,25" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
                                        <local:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
                                        <ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />
                                    </StackPanel>
                                </Border>
                                <Button x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0"
                                    Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </Popup>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是我对解决方案的想法。我已将它作为有问题的CustomDialog 的明确声明的属性包含在内。您可以将它直接添加到您的项目中，以便在所有情况下覆盖它，或者静态声明它并在您的所有CustomDialogs 中引用它。

我还更改了命名空间引用以模仿您的。 (local -> callisto)

<callisto:CustomDialog ...>

....

    <callisto:CustomDialog.Style>
            <Style TargetType="callisto:CustomDialog">
                <Setter Property="IsOpen" Value="False" />
                <Setter Property="BorderThickness" Value="{ThemeResource CustomDialogBorderThemeThickness}"/>
                <Setter Property="BorderBrush" Value="{ThemeResource CustomDialogBorderThemeBrush}" />
                <Setter Property="BackButtonVisibility" Value="Collapsed" />
                <Setter Property="Background" Value="{ThemeResource CustomDialogBackgroundThemeBrush}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="callisto:CustomDialog">
                            <Popup x:Name="PART_RootPopup" IsLightDismissEnabled="False" IsOpen="{TemplateBinding IsOpen}">
                                <Grid x:Name="PART_RootGrid" Background="#72000000">
                                    <Border x:Name="PART_BannerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="Center">
                                        <Grid x:Name="PART_DialogGrid" Background="{TemplateBinding Background}" VerticalAlignment="Center">
                                            <Grid.Resources>
                                                <Style x:Key="DialogBackButtonStyle" TargetType="Button">
                                                    <Setter Property="MinWidth" Value="0"/>
                                                    <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
                                                    <Setter Property="FontWeight" Value="Normal"/>
                                                    <Setter Property="FontSize" Value="26.66667"/>
                                                    <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
                                                    <Setter Property="AutomationProperties.Name" Value="Back"/>
                                                    <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="Button">
                                                                <Grid x:Name="RootGrid" Width="30" Height="30">
                                                                    <Grid Margin="-3,-5,0,0">
                                                                        <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}"/>
                                                                        <TextBlock x:Name="NormalGlyph" Text="{ThemeResource SettingsFlyoutBackButtonGlyph}" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
                                                                        <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}" Opacity="0"/>
                                                                    </Grid>
                                                                    <Rectangle
                                    x:Name="FocusVisualWhite"
                                    IsHitTestVisible="False"
                                    Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="1.5"/>
                                                                    <Rectangle
                                    x:Name="FocusVisualBlack"
                                    IsHitTestVisible="False"
                                    Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="0.5"/>

                                                                    <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name="CommonStates">
                                                                <VisualState x:Name="Normal" />
                                                                <VisualState x:Name="PointerOver">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BackButtonPointerOverBackgroundThemeBrush}"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Pressed">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="ArrowGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="NormalGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Disabled">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                            </VisualStateGroup>
                                                            <VisualStateGroup x:Name="FocusStates">
                                                                <VisualState x:Name="Focused">
                                                                    <Storyboard>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualWhite"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                        <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualBlack"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Unfocused" />
                                                                <VisualState x:Name="PointerFocused" />
                                                            </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <Border VerticalAlignment="Center">
                                    <StackPanel Margin="13,19,13,25" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Width="{TemplateBinding Width}" MaxWidth="680">
                                        <callisto:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
                                        <ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" HorizontalAllignment="{TemplateBinding HorizontalContentAlignment}"/>
                                    </StackPanel>
                                </Border>
                                <Button x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0"
                                    Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </Popup>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

....

</callisto:CustomDialog>

希望这对编码有所帮助！

编辑：错误的风格！已修复，抱歉。

编辑：要尝试的最后一件事是从内容定义中删除列定义。这可能会影响标题的定位，因此您可能需要在底部进行调整。

【讨论】：

再次感谢。我收到以下错误：“无法将具有 TargetType 'Callisto.Controls.Flyout' 的样式应用于 'Callisto.Controls.CustomDialog' 类型的对象”
快！你是对的，我复制了错误的风格！解决方案仍然相同（风格不同），但我会修正我的答案。
非常感谢您的修复。我觉得我们现在离解决方案更近了。我目前收到以下错误：错误 21 在“ContentPresenter”类型中找不到属性“HorizontalAllignment”。
我刚刚注意到这只是一个错字。现在，我收到如下错误：“找不到具有名称/键 CustomDialogBorderThemeThickness 的资源”。有很多资源找不到。
最快的解决方法是转到 Github 答案中的链接，并将顶部合并的 ThemeDictionaries 复制到您的解决方案中。