Make two listboxes have the same width
-
Hello, I have two listboxes arranged side by side in a Grid control.
I want both listboxes to have the same width, regardless of the (text) content of the listboxes. Initially, the left listbox contains a list of strings. The right listbox is empty. If the maximum width of the items in the left listbox is smaller than (roughly) half of the size allocated to the entire grid, everything is ok. Otherwise, the left listbox occupies whatever width is needed to display the widest visible item, and the other list gets the rest. I suppose that the grid "asks" each listbox what width it wants, and they in turn ask their items. I'd like to stop the process before the width of the items gets involved, IOW both listboxes should report minimal width, then the grid would have plenty of space on its hands, which it would split evenly between the two listboxes. How can I achieve that ? I've seen suggestions on the web, involving either SharedSizeGroup or disabling the listbox' horizontal scrollbar and setting HorizontalContentAlignment to "Stretch". They don't seem to work...I also tried binding the left listbox' MaximalWidth the the right listbox' Width, to no avail.
-
Hello, I have two listboxes arranged side by side in a Grid control.
I want both listboxes to have the same width, regardless of the (text) content of the listboxes. Initially, the left listbox contains a list of strings. The right listbox is empty. If the maximum width of the items in the left listbox is smaller than (roughly) half of the size allocated to the entire grid, everything is ok. Otherwise, the left listbox occupies whatever width is needed to display the widest visible item, and the other list gets the rest. I suppose that the grid "asks" each listbox what width it wants, and they in turn ask their items. I'd like to stop the process before the width of the items gets involved, IOW both listboxes should report minimal width, then the grid would have plenty of space on its hands, which it would split evenly between the two listboxes. How can I achieve that ? I've seen suggestions on the web, involving either SharedSizeGroup or disabling the listbox' horizontal scrollbar and setting HorizontalContentAlignment to "Stretch". They don't seem to work...I also tried binding the left listbox' MaximalWidth the the right listbox' Width, to no avail.
The code you posted should do exactly what you want. When you use star-sizing, the grid does NOT resize columns based on child control sizes... First it sets the size of fixed columns (Like your "40"), then it figures out the size of "Auto" columns by asking the controls in those columns what they need, then it splits up the remainder into the star-sized columns. My suggestions would be: 1) Make sure the grid itself isn't the piece resizing... If it's inside, say, a ScrollViewer, then it'll enlarge itself to (2 x the widest listbox) + 40... It might be the grid itself being cut off on the right, not the second listbox 2) If your actual code is more complex than this (And I suspect it is), try commenting out a piece at a time until you see the behavior you're expecting.
Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels) -
The code you posted should do exactly what you want. When you use star-sizing, the grid does NOT resize columns based on child control sizes... First it sets the size of fixed columns (Like your "40"), then it figures out the size of "Auto" columns by asking the controls in those columns what they need, then it splits up the remainder into the star-sized columns. My suggestions would be: 1) Make sure the grid itself isn't the piece resizing... If it's inside, say, a ScrollViewer, then it'll enlarge itself to (2 x the widest listbox) + 40... It might be the grid itself being cut off on the right, not the second listbox 2) If your actual code is more complex than this (And I suspect it is), try commenting out a piece at a time until you see the behavior you're expecting.
Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels)Ian Shlasko wrote:
When you use star-sizing, the grid does NOT resize columns based on child control sizes... First it sets the size of fixed columns (Like your "40"), then it figures out the size of "Auto" columns by asking the controls in those columns what they need, then it splits up the remainder into the star-sized columns.
That's the way I understand it. But I suspect that the listbox in turn examines the items to answer "what it needs". When I limit the number of characters in the text items for a test, everything works perfectly. So the content of the listbox does matter. I think.
-
Ian Shlasko wrote:
When you use star-sizing, the grid does NOT resize columns based on child control sizes... First it sets the size of fixed columns (Like your "40"), then it figures out the size of "Auto" columns by asking the controls in those columns what they need, then it splits up the remainder into the star-sized columns.
That's the way I understand it. But I suspect that the listbox in turn examines the items to answer "what it needs". When I limit the number of characters in the text items for a test, everything works perfectly. So the content of the listbox does matter. I think.
Except, in the code you posted, the listbox is in a star-sized column, not an Auto column. A star-sized one will always take up a fraction of the remaining width after fixed and auto columns, calculated by dividing its star width by the total star width (1* / (1* + 1*) = 1/2). Yes, the listbox would resize itself based on its contents, but the grid tells it what rectangle it's supposed to fill, and in this case, that rectangle will have nothing to do with the ListBox contents. So like I said... Check that the grid itself isn't enlarging, and then try reducing your code until the problem is eliminated (to track down the exact cause).
Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels) -
Except, in the code you posted, the listbox is in a star-sized column, not an Auto column. A star-sized one will always take up a fraction of the remaining width after fixed and auto columns, calculated by dividing its star width by the total star width (1* / (1* + 1*) = 1/2). Yes, the listbox would resize itself based on its contents, but the grid tells it what rectangle it's supposed to fill, and in this case, that rectangle will have nothing to do with the ListBox contents. So like I said... Check that the grid itself isn't enlarging, and then try reducing your code until the problem is eliminated (to track down the exact cause).
Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels)Indeed the Grid containing the Listboxes was inside a StackPanel inside a ScrollViewer with HorizontalScrollBarVisibility="Auto". Which caused the problem. Thanks for helping, J-L
-
Hello, I have two listboxes arranged side by side in a Grid control.
I want both listboxes to have the same width, regardless of the (text) content of the listboxes. Initially, the left listbox contains a list of strings. The right listbox is empty. If the maximum width of the items in the left listbox is smaller than (roughly) half of the size allocated to the entire grid, everything is ok. Otherwise, the left listbox occupies whatever width is needed to display the widest visible item, and the other list gets the rest. I suppose that the grid "asks" each listbox what width it wants, and they in turn ask their items. I'd like to stop the process before the width of the items gets involved, IOW both listboxes should report minimal width, then the grid would have plenty of space on its hands, which it would split evenly between the two listboxes. How can I achieve that ? I've seen suggestions on the web, involving either SharedSizeGroup or disabling the listbox' horizontal scrollbar and setting HorizontalContentAlignment to "Stretch". They don't seem to work...I also tried binding the left listbox' MaximalWidth the the right listbox' Width, to no avail.
You cant do that in XAML, because you need to check which listbox width is higher. You can add event handler on event which occurs when you already know widths of both listboxes. For examole: Loaded, Binding.SourceUpdated or smth like this. Also, if you want to avoid streching of listbox, you have to set colums width="auto":
<ColumnDefinition Width="auto" />