0

So I've used the '*' key to divide the total width into different areas that are responsive. But obviously I can't use grid everywhere, some elements don't support it etc. So my question is how do I keep those elements flexible? The most recent scenario where I stumbled upon this problem is when I tried using a ListView with an interior GridView. From my understanding GridView doesn't support declaring GridView columns with a width percentage and only use a fixed Width value. What is a work-around for this? Does it have to be this way? I would really like to make my UI as flexible as possible. Right now the fixed widths are screwing me over because I'm designing a UI for a 50" 2160p screen. However, my screen on which I'm designing on is much smaller (13" 1080p) and hence the elements get scaled out of existence and I can't really use it. Here's an example of what I'm looking for or what would be the ideal scenario.

Current scenario

<ListView ItemsSource="{Binding NotApprovedChanges}" Margin="40 90 40 40" FontSize="26" Name="nonApprovedChangesList">
    <ListView.View>                    
        <GridView>
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="ID" Width="150" DisplayMemberBinding="{Binding Id}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Requester" Width="200" DisplayMemberBinding="{Binding Requester}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Date" Width="250" DisplayMemberBinding="{Binding Date}" />
        </GridView>
    </ListView.View>
</ListView>

What I'm looking for

<ListView ItemsSource="{Binding NotApprovedChanges}" Margin="40 90 40 40" FontSize="26" Name="nonApprovedChangesList">
    <ListView.View>                    
        <GridView>
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="ID" Width="*" DisplayMemberBinding="{Binding Id}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Requester" Width="2*" DisplayMemberBinding="{Binding Requester}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Date" Width="*" DisplayMemberBinding="{Binding Date}" />
        </GridView>
    </ListView.View>
</ListView>

or

<ListView ItemsSource="{Binding NotApprovedChanges}" Margin="40 90 40 40" FontSize="26" Name="nonApprovedChangesList">
    <ListView.View>                    
        <GridView>
            <GridView.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2* />
                <ColumnDefinition Width="*" />
            </GridView.ColumnDefinitions>

            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="ID" GridView.Column="0" DisplayMemberBinding="{Binding Id}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Requester" GridView.Column="1" DisplayMemberBinding="{Binding Requester}" />
            <GridViewColumn HeaderContainerStyle="{StaticResource ListViewStyle}" Header="Date" GridView.Column="2" DisplayMemberBinding="{Binding Date}" />
        </GridView>
    </ListView.View>
</ListView>
rasqall
  • 33
  • 7
  • Your title does not fit your description really well. Responsiveness is about the ability of your UI to be reactive (=responsive) even when a long task is running in the back, whereas your desired behaviour is just some size problem of your controls. – MakePeaceGreatAgain Nov 08 '19 at 09:36
  • @HimBromBeere I thought it meant reponsive as in responsive to size changes, but I see where you're coming from. I'll change it to flexible or something. – rasqall Nov 08 '19 at 09:38
  • @HimBromBeere afaik "responsive" can indeed refer to the ability to render and layout correctly on multiple screen sizes. [FYI](https://en.wikipedia.org/wiki/Responsive_web_design). – Corentin Pane Nov 08 '19 at 09:54
  • @rasqall the [docs](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.gridviewcolumn.width?view=netframework-4.8#xaml-values) refer to this possibility: ``. Does it help? Also check [here](https://stackoverflow.com/questions/8331940/how-can-i-get-a-listview-gridviewcolumn-to-fill-the-remaining-space-in-my-grid/10526024#10526024) and [here](https://stackoverflow.com/questions/10309249/listview-gridviewcolumn-width). – Corentin Pane Nov 08 '19 at 09:58
  • @CorentinPane Thanks, I tried the Auto value but then it only sizes itself to fit the header and not necessarily the content in that column in the list. I've thought about the solutions you linked about binding the width to a variable in a viewmodel and implementing the INotifyPropertyChanged interface, I'll try that thanks. – rasqall Nov 08 '19 at 10:10
  • 1
    Gridview columns use a double to define width. Datagrid columns have a width which is gridlength. That supports * like grid columns. – Andy Nov 08 '19 at 13:14
  • 1
    Margins. You should avoid large margins completely. As soon as you are typing 2 numbers that's time to start thinking whether you have a better way. When you type 3 then that's a red flag. IMO. – Andy Nov 08 '19 at 13:15
  • @Andy Thanks, very good advice on both comments. Yeah I'm trying to move away in margins and specified pixel values, hence why I stumbled upon asking this question. Although, it sounds like I'm gonna switch to a datagrid, thanks. – rasqall Nov 08 '19 at 15:53

0 Answers0