ItemsControl中的每個項目如何自動縮放？

Question

我需要在項目中使用ItemsControl 。 我不僅希望ItemsControl每個項目都可以自動縮放，而且ItemsControl中的每個項目都具有相同的大小。

因此，我決定使用ViewBox來做到這一點。

這是XAML：

<Viewbox Grid.Column="1" VerticalAlignment="Center" StretchDirection="UpOnly">
    <ItemsControl Name="FunctionButton" Grid.Column="1" VerticalAlignment="Center">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button>
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#00008000" Cursor="Hand" Margin="0,5" VerticalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.25*"/>
                                    <ColumnDefinition Width="0.15*"/>
                                    <ColumnDefinition Width="0.60*"/>
                                </Grid.ColumnDefinitions>
                                <Ellipse Height="{Binding Path=ActualWidth,RelativeSource={RelativeSource Self}}" 
                                    Fill="#44474c" Name="E"/>
                                <TextBlock Text="{Binding ButtonName}" 
                                    Grid.Column="2" 
                                    VerticalAlignment="Center" 
                                    Foreground="#575757" 
                                    FontSize="13" 
                                    Margin="0,10"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" 
                                                    Storyboard.TargetName="E" 
                                                    To="#a4cbd0" 
                                                    Duration="00:00:01"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" 
                                                    Storyboard.TargetName="E" 
                                                    To="#44474c" 
                                                    Duration="00:00:01"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Viewbox>

這是后面的代碼：

public MainPage()
{
    InitializeComponent();
    FunctionButton.ItemsSource = FunctionButtonList;
    FunctionButtonClass FBC = new FunctionButtonClass();
    FBC.ButtonName = "123";
    FunctionButtonList.Add(FBC);
    FBC = new FunctionButtonClass();
    FBC.ButtonName = "4546465";
    FunctionButtonList.Add(FBC);
    FBC = new FunctionButtonClass();
    FBC.ButtonName = "34534534534";
    FunctionButtonList.Add(FBC);
}

public class FunctionButtonClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChange(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    string _ButtonName;
    public string ButtonName
    {
        get
        {
            return _ButtonName;
        }
        set
        {
            _ButtonName = value;
            NotifyPropertyChange("ButtonName");
        }
    }            
}

List<FunctionButtonClass> FunctionButtonList = new List<FunctionButtonClass>();

好的，程序運行后，結果是這樣的：

第三個橢圓缺失，而第一個和第二個橢圓的大小似乎不一樣。

我的代碼有什么問題？ 如何使ItemsControl的每個項目都具有相同的大小？ 謝謝。

Answer 1

如果您希望任何控件以相同的條件（例如height等）開始，則可以更改Application.xaml 。 如果執行此操作，則如果不手動更改，則每個控件將獲得相同的起始值 。 我想您的橢圓應該沒問題。

<Application.Resources>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="25"/>
    </Style>
    <Style TargetType="Ellipse">
        <Setter Property=""
    </Style>
</Application.Resources>