开发者

Can percentage values be used in XAML?

开发者 https://www.devze.com 2023-02-19 16:30 出处:网络
In html one can say width=\"20%\". This is not allowed in XAML of course. Does anyone know why that is or is there a way t开发者_开发知识库o get percentage value support in XAML?Grid ColumnDefinitions

In html one can say width="20%". This is not allowed in XAML of course. Does anyone know why that is or is there a way t开发者_开发知识库o get percentage value support in XAML?


Grid ColumnDefinitions and RowDefinitions allow for proportional units (in addition to fixed pixels and Auto).

Here are 2 examples:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="20" />
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

The first column will be as large as necessary to fit all content in the column. The next column is 20 device-independant pixels wide. The remaining Width of the grid will be divided equally among the remaining columns. (100% / 4 = 25% in each)

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width="4*"/>
  <ColumnDefinition Width="4*"/>
  <ColumnDefinition Width="*"/> 
</Grid.ColumnDefinitions>

This code would divide 4 columns into 10%, 40%, 40%, and 10% of the total Grid Width.


If you aren't using Grids then you can use Xamarin.Essentials to get the real width/height in pixels then divide by the density and multiply by your desired dimensions

i.e.

Convert.ToInt32(Math.Round(DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density * 0.9))

Real screen width in pixels / density * percentage required

My example is 90% of screen width, you could bind to this calculation in a VM from Xaml

Xaml

<StackLayout WidthRequest="{Binding PickerWidth}" BackgroundColor="AliceBlue">
    <Label Text="Test" HorizontalOptions="FillAndExpand"/>
</StackLayout>

VM

private int _pickerWidth;
public int PickerWidth
{
     get => _pickerWidth;
     set => SetProperty(ref _pickerWidth, value);
}

public void Init()
{
   PickerWidth = Convert.ToInt32(Math.Round(DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density * 0.9))
}

I've just started using this for our app running on iOS and Android using XF 4.8 and it is working correctly to size a popup page to 90% of the available screenwidth

Tested on tablets and phones


You are better off doing a programmatic way of going about the solution.

Example to assign a half screen size to element:

var deviceScreenHeight = DeviceDisplay.MainDisplayInfo.Height;
view.HeightRequest = deviceScreenHeight * .5; 

The restriction is that this doesn't have an ability to apply through binding to XAML directly, but easily resolves the problem associated and can be assigned to any view dimensions (of course). Always understand that complicated applications of things are based on simpler calculations like this and can be readily applied because of it. Feel free to apply this to an inheriting class that overloads the height or width according to any percentage calcs.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号