UWP : Setting the Width and Height of controls as percentage values

Question

I am trying to use a StackPanel control to display some overview options. I need to have this control using 20% of the window width when the MinWindowWidth is greater than 768px. When this is run on mobile I need the control to fill the width of the screen.

I tried as suggested in this question to try and set a value in percentage. However, I get the error - "* string cannot be converted to length".

Here is my XAML -

        <StackPanel x:Name="OverviewStack">
            <RelativePanel>
                <StackPanel Margin="10" x:Name="User" Orientation="Horizontal">
                    <Ellipse Margin="5" Width="50" Height="50">
                        <Ellipse.Fill>
                            <ImageBrush>
                                <ImageBrush.ImageSource>
                                    <BitmapImage UriSource="Assets/insp.jpg" />
                                </ImageBrush.ImageSource>
                            </ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Margin="5" VerticalAlignment="Center" Text="Ajay Kelkar" />
                </StackPanel>
                <StackPanel Margin="10" x:Name="Options" Orientation="Vertical">
                    <TextBlock Margin="5" Text="Sample text" />
                </StackPanel>
            </RelativePanel>
        </StackPanel>

Is a percentage value not possible in UWP? Or am I doing something wrong?

@JustinXL I will try that out. I need that to work with State Triggers — Ajay Kelkar, Sep 12 '15 at 13:40
@JustinXL can you post that as an answer? I've switched to using a Grid — Ajay Kelkar, Aug 18 '16 at 07:11

score 0 · Answer 1 · answered Jul 19 '16 at 07:21

You need to determine which platform you're currently on, and set the value accordingly. This sounds like a converter. Since you only have 1 project for UWP you'll need to check in the converter which platform you're on. such info can be acquired as such:

if (AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile") { //Act accordingly }

So I think you'd like to do something like this:

public object Convert(object value, Type targetType, object parameter, string language)
    {
        // bind the width as the value the converter is set upon
        var width = double.Parse(value.ToString());
        if (AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile")
        {
            return width;
        }

        // You weren't clear exactly regarding the 768px thing so act accordingly here
        return width * 0.2d;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }

Using a converter for this is a really ugly solution. A grid which is what op finally used, is a lot cleaner. — Stefan Fabian, Oct 31 '17 at 12:51

UWP : Setting the Width and Height of controls as percentage values

1 Answers1