動態設置按鈕的寬度和高度

Question

我是Windows應用程序開發的新手：

我有一種情況，我需要在其下方顯示帶有文本的按鈕矩陣，我能夠做到這一點，但是這里的問題是矩陣可以是2x2、2x3、2x4或2x6的任何東西。

但是按鈕應該是正方形而不是矩形，如果我向其添加圖像，則圖像看起來很拉伸。

這是我的代碼：

public partial class MainPage : PhoneApplicationPage
    {

        int numberOfColumns = 2;
        int numberOfRows = 3;
        public double cellWidth;
        public double cellHeight;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(SetGridCellWidthAndHeight);

        }

       void SetGridCellWidthAndHeight(object sender, RoutedEventArgs e)
        {
            cellWidth = GridWindows.ActualHeight / numberOfColumns;
            cellHeight = GridWindows.ActualHeight / numberOfRows;
            this.GridWindows.Children.Add(SetUpGridLayout());
        }

        private Grid SetUpGridLayout()
        {
            Grid grid = new Grid();
            grid.Background = new SolidColorBrush(Colors.White);

            // Create column and row definitions.
            ColumnDefinition[] columnDefinition = new ColumnDefinition[numberOfColumns];
            RowDefinition[]  rowDefinition = new RowDefinition [numberOfRows];

            for (int i = 0; i < columnDefinition.Count(); i++)
            {
                columnDefinition[i] = new ColumnDefinition();
                grid.ColumnDefinitions.Add(columnDefinition[i]);
            }

            for (int i = 0; i < rowDefinition.Count(); i++)
            {
                rowDefinition[i] = new RowDefinition();
                grid.RowDefinitions.Add(rowDefinition[i]);
            }

            int count = 1;

                for (int row = 0; row < numberOfRows; row++)
                {
                    for (int column = 0; column < numberOfColumns; column++)
                    {
                        StackPanel gridViewStackPlanel = new StackPanel();
                        gridViewStackPlanel.Background = new SolidColorBrush(Colors.White);

                        Button button = new Button();
                        button.Width = cellWidth*0.8;
                        button.Height = cellHeight *0.8;
                        //topicButton.Background = new SolidColorBrush(Colors.Red);
                        button.VerticalAlignment = VerticalAlignment.Center;
                        button.HorizontalAlignment = HorizontalAlignment.Center;
                         button.Background = new SolidColorBrush(Colors.Red);

                        //To display the Topic name
                        TextBlock name= new TextBlock();
                        name.Text = " Value" + count;
                        name.Foreground = new SolidColorBrush(Colors.Black);
                        name.HorizontalAlignment = HorizontalAlignment.Center;

                        gridViewStackPlanel.Children.Add(button);
                        gridViewStackPlanel.Children.Add(name);

                        count++;

                        grid.Children.Add(gridViewStackPlanel);
                        Grid.SetColumn(gridViewStackPlanel, column);
                        Grid.SetRow(gridViewStackPlanel, row);
                    }
                }
          return grid;

        }

Answer 1

當您編寫這樣的代碼時：

button.Width = cellWidth * 0.8;
button.Height = cellHeight * 0.8;

僅當cellWidth == cellHeight您將得到一個正方形。 這很可能不是事實。 因此，您的寬度和高度是不同的。 考慮將上述內容替換為以下內容：

cellWidth = Math.Min(GridWindows.ActualHeight / numberOfColumns, GridWindows.ActualHeight / numberOfRows);

button.Width = cellWidth * 0.8;
button.Height = cellWidth * 0.8;

現在將是正方形。