当控件添加到窗口时，按钮大小会在用户控件上更改

Question

好的，所以我为键盘创建了一个用户控件。它看起来像这样：

这个代码是：

<DockPanel DockPanel.Dock="Left">
    <StackPanel DockPanel.Dock="Left">
        <Button Content="1"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnOne" />

        <Button Content="4"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnFour" />

        <Button Content="7"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnSeven" />

        <Button Content="0"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnZero" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left">
        <Button Content="2"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnTwo" />

        <Button Content="5"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnFive" />

        <Button Content="8"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnEight" />

        <Button Content="."
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnDecimal" />
    </StackPanel>

    <DockPanel DockPanel.Dock="Left">
        <StackPanel DockPanel.Dock="Bottom">
            <Button Content="Del"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Width="Auto"
                    Margin="8"
                    Height="60"
                    Name="bttnDelete" />
        </StackPanel>

        <StackPanel DockPanel.Dock="Left">
            <Button Content="3"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnThree" />

            <Button Content="6"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnSix" />

            <Button Content="9"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnNine" />
        </StackPanel>
        <StackPanel DockPanel.Dock="Left"
                    Orientation="Horizontal">
            <Button Content="Ent"
                    HorizontalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    Width="60"
                    Margin="8"
                    VerticalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    Height="Auto"
                    Name="bttnEnter" />
        </StackPanel>
    </DockPanel>
</DockPanel>

现在，当我将键盘添加到窗口时，窗口会改变按钮的大小，如下所示：

代码是：

<DockPanel>
    <StackPanel DockPanel.Dock="Top">
        <Label Content="New Item"
               Style="{StaticResource MyLabel2}"
               FontStyle="Italic" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left"
                Margin="0,20,0,0">
        <Label Content="BHA Description"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Label Content="OD"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Label Content="Length"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Button Name="bttnSave"
                Content="Save"
                Margin="2,14,2,2" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left"
                Margin="10,20,25,0">
        <ComboBox Name="cmbDesc"
                  HorizontalContentAlignment="Right"
                  FontSize="23" />

        <Label Content="" />

        <ComboBox Name="cmbOd"
                  HorizontalContentAlignment="Right"
                  FontSize="23" />

        <Label Content="" />

        <TextBox Text="Length"
                 HorizontalContentAlignment="Right"
                 FontSize="25"
                 MaxLength="10" />

        <Label Content="" />

        <Button Name="bttnCancel"
                Content="Cancel"
                Click="bttnCancel_Click"
                Margin="2,14,2,2" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left">

        <UserControls:Keypad />
    </StackPanel>
</DockPanel>

现在，我确实有一个默认按钮样式，代码是：

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="OverridesDefaultStyle"
            Value="True" />
    <Setter Property="Margin"
            Value="2" />
    <Setter Property="FontFamily"
            Value="Calibri" />
    <Setter Property="FontSize"
            Value="16px" />
    <Setter Property="FontWeight"
            Value="Bold" />
    <Setter Property="Height"
            Value="75" />
    <Setter Property="Width"
            Value="150" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1"
                                 MappingMode="RelativeToBoundingBox"
                                 StartPoint="0.5,0">
                <GradientStop Color="#FFF5EFEF"
                              Offset="0" />
                <GradientStop Color="#FFA09C9C"
                              Offset="0.808" />
                <GradientStop Color="#FFA09C9C"
                              Offset="1" />
                <GradientStop Color="#FFF5EFEF"
                              Offset="0.192" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border"
                        BorderThickness="2"
                        Padding="4,2"
                        BorderBrush="Black"
                        CornerRadius="7"
                        Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Name="contentShadow"
                                          Style="{StaticResource ShadowStyle}">
                            <ContentPresenter.RenderTransform>
                                <TranslateTransform X="1.0"
                                                    Y="1.0" />
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Name="content" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="border"
                                Property="BorderBrush"
                                Value="Red" />
                        <Setter Property="Foreground"
                                Value="Red" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                             Value="True">
                        <Setter Property="Foreground"
                                Value="#FFFDFDFD" />
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1"
                                                     MappingMode="RelativeToBoundingBox"
                                                     StartPoint="0.5,0">
                                    <GradientStop Color="Red"
                                                  Offset="0" />
                                    <GradientStop Color="Red"
                                                  Offset="1" />
                                    <GradientStop Color="Black"
                                                  Offset="0.573" />
                                    <GradientStop Color="Black"
                                                  Offset="0.402" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="content"
                                Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform Y="1.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的问题是，当我在用户控件本身硬编码高度/宽度值时，为什么按钮会恢复为默认设置？我怎样才能修复它以便不这样做？

Answer 1

我使用基于Grid的布局：

我想象DockPanel和StackPanel实例正在做一些奇怪的事情 - 说实话，如果你想要一个统一的网格，比如键盘，那就是要走的路了

<Grid>
    <Grid.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="8" />
        </Style>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Button Grid.Column="0" Grid.Row="0">1</Button>
    <Button Grid.Column="1" Grid.Row="0">2</Button>
    <Button Grid.Column="2" Grid.Row="0">3</Button>
    <Button Grid.Column="3" Grid.Row="0" Grid.RowSpan="3">Ent</Button>
    <Button Grid.Column="0" Grid.Row="1">4</Button>
    <Button Grid.Column="1" Grid.Row="1">5</Button>
    <Button Grid.Column="2" Grid.Row="1">6</Button>
    <Button Grid.Column="0" Grid.Row="2">7</Button>
    <Button Grid.Column="1" Grid.Row="2">8</Button>
    <Button Grid.Column="2" Grid.Row="2">9</Button>
    <Button Grid.Column="0" Grid.Row="3">0</Button>
    <Button Grid.Column="1" Grid.Row="3">.</Button>
    <Button Grid.Column="2" Grid.Row="3" Grid.ColumnSpan="2">Del</Button>
</Grid>

无论你想要多大或多小，它都会完美地扩展 - 如果需要你可以通过usercontrol属性做一些模板绑定来设置属性，例如按钮边距等

如果我能帮助它，我真的不会使用DockPanel - 我认为这不是最直观的控制

编辑：我在400 x 400区域中添加了你的计算布局和上面的一个 - 这就是结果

（忽略网格布局上的1按钮，我在测试样式时明确地将宽度设置为150并忘记将其设置回来！如果删除显式宽度，它会像其他按钮一样完全缩放）

Answer 2

您的顶级DockPanel上没有将LastChildFill属性设置为False。这就是“Ent”改变大小和移动屏幕的原因。

您还可以将“Del”上的Horizo​​ntalAlignment设置为拉伸。尝试将其设置为Left，但可能没有使用LastChildFill更正。

整体调整大小是对Horizo​​ntalAlignment设置为Stretch设置为Left。