当屏幕尺寸发生变化时，如何让我的按钮调整大小？ [英] How do I make make my buttons to resize when the size of the screen changes?

问题描述

你好，伙计们。

我有Grid的星大小，并期望我的按钮在更大或更大的屏幕上显示时增大或缩小。我试图找到解决方案，但失败了。

我认为行和列定义中的一个星可以排除所有内容但不是。

以下是我的代码示例：

< Grid removed =＃FF075B16> 
< Grid.RowDefinitions> 
< RowDefinition Height =*/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =*/> 
< ColumnDefinition Width =20/> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
< Button x：Name =vitaminsButtonHorizo​​ntalAlignment =LeftMargin =200,140,​​0,0VerticalAlignment =Top
 Height =178Width =405Content = Button1FontSize =24> 
< Button.Background> 
< ImageBrush ImageSource =Assets / 001（www.cute-pictures.blogspot.com）.jpgStretch =UniformToFill/> 
< /Button.Background> 
< / Button> 
< Button Horizo​​ntalAlignment =RightMargin =0,140,​​200,0VerticalAlignment =TopGrid.Column =2
 Height =178Width =405Content =Button2 FontSize =24x：Name =mineralsButton> 
< Button.Background> 
< ImageBrush ImageSource =Assets / 1280px-ARS_copper_rich_foods.jpgStretch =UniformToFill/> 
< /Button.Background> 
< / Button> 
< Button Horizo​​ntalAlignment =LeftMargin =200,0,0,140VerticalAlignment =BottomGrid.Row =1x：Name =BrowseAllButton
 Height =178Width =405Content =Button3FontSize =24> 
< Button.Background> 
< ImageBrush ImageSource =Assets / freshvegetablesinbasket.jpgStretch =UniformToFill/> 
< /Button.Background> 
< / Button> 
< SearchBox Grid.Column =2Horizo​​ntalAlignment =LeftMargin =150,179,0,0Grid.Row =1
 VerticalAlignment =TopWidth =357PlaceholderText =搜索
 /> 
< / Grid> 
 

解决方案

1.将按钮放在不同的单元格中。这意味着为每个控件（按钮）创建一个单元格。



2.然后设置控件/按钮的Horizo​​ntalAlignment和VerticalAlignment=Stretch。 />


3.完成。每当单元格的大小增加时，按钮的大小将自动增长。



例如：Window的大小为600x400

 <   grid     horizo​​ntalalignment   = 拉伸    verticalalignment   = 拉伸 >  
 <   grid.rowdefinition  >  
 <   rowdefiniton     height   = < span class =code-keyword> *    /  >  
 <   rowdefiniton     height   =  *    /  >  
 <   / grid.rowdefinition  > ;  
 <   grid.columndefinition  >  
 <   columndefinition     width   =  *    /  >  
 <   columndefinition     width   =  *    /  >  
 <   / grid.columndefinition  >  
 
 <  按钮    grid.row   =   0    grid.column   =  0    horizo​​ntalalignment   = 拉伸    verticalalignment   = 拉伸    /  >  
 <  按钮    Grid.Row   =  0    Grid.Column   =   1    Horizo​​ntalAlignment   = 拉伸    VerticalAlignment   = 拉伸    /  >  
 <  按钮    Grid.Row   =  1    Grid.Column   =  0    Horizo​​ntalAlignment   = 拉伸    VerticalAlignment   = 拉伸 < span class =code-attribute>   /  >  
 <  按钮    Grid.Row   =  1    Grid.Column   =  1     Horizo​​ntalAlignment   = 拉伸    VerticalAlignment   = 拉伸    /  >  
 <   / grid  >  

这会将你的网格拉伸到可用的宽度和高度。



所以，现在你的网格大小是600x400。



现在你有4个单元，都有相同的大小。

这意味着每个单元的大小是300x200。



因为我们设置了每个按钮的对齐属性，按钮将填充单元格的大小。

Hi, guys.
I have Grid with "star sizing" and expected my buttons to grow or shrink when displaying on bigger or larger screen. I tried to find solution to this but failed.
I thougt that a star in row and column definition sorts everything out but not.
Here is the sample of my code:

<Grid removed="#FF075B16" >
     <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="20"/>
         <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
     <Button x:Name="vitaminsButton" HorizontalAlignment="Left"    Margin="200,140,0,0" VerticalAlignment="Top"
             Height="178" Width="405" Content="Button1" FontSize="24">
         <Button.Background>
             <ImageBrush ImageSource="Assets/001 (www.cute-pictures.blogspot.com).jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <Button HorizontalAlignment="Right" Margin="0,140,200,0" VerticalAlignment="Top" Grid.Column="2"
             Height="178" Width="405" Content="Button2" FontSize="24" x:Name="mineralsButton">
         <Button.Background>
             <ImageBrush ImageSource="Assets/1280px-ARS_copper_rich_foods.jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <Button HorizontalAlignment="Left" Margin="200,0,0,140" VerticalAlignment="Bottom" Grid.Row="1" x:Name="BrowseAllButton"
             Height="178" Width="405" Content="Button3" FontSize="24">
         <Button.Background>
             <ImageBrush ImageSource="Assets/freshvegetablesinbasket.jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <SearchBox Grid.Column="2" HorizontalAlignment="Left" Margin="150,179,0,0" Grid.Row="1"
                VerticalAlignment="Top" Width="357"  PlaceholderText="Search"
                />
 </Grid>

解决方案

1.place your buttons in separate cells. That means create a cell for each control(button).

2.Then set your control/button's "HorizontalAlignment" and "VerticalAlignment" = "Stretch".

3.Done. Whenever the size of the cell will grow, the button's size will automatically grow.

For example : Window's size is 600x400

<grid horizontalalignment="Stretch" verticalalignment="Stretch">
    <grid.rowdefinition>
        <rowdefiniton height="*" />
        <rowdefiniton height="*" />
    </grid.rowdefinition>
    <grid.columndefinition>
        <columndefinition width="*" />
        <columndefinition width="*" />
    </grid.columndefinition>

    <button grid.row="0" grid.column="0" horizontalalignment="Stretch" verticalalignment="Stretch" />
    <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</grid>

This will stretch your grid to available width and height.

So, now your grid's size is 600x400.

Now You have 4 cells, all having equal sizes.
That means each cell's size is 300x200.

And because we have set each button's alignment property, the buttons will fill to the cell's size.

这篇关于当屏幕尺寸发生变化时，如何让我的按钮调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！