Unexpectedly solved a WPF Layout Problem

I did a small test today and accidentally solved one of my troubles. For more information, seeWPF FAQIn, "How can I disable Content support for large containers ?"

Previously, I nested a canvas container on the outside to solve the problem. In this way, the overflow part is forcibly removed. If you want to convert unnecessary words into ellipsis, you cannot do it, the gradient end point also expands to the container with the content.

Now it is improved to the following section:CodeTo achieve good results:

 

Code
< Page Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" Xmlns: x = "Http://schemas.microsoft.com/winfx/2006/xaml" >
< Page. Resources >
< Style Targettype = "Listboxitem" >
< Setter Property = "Template" >
< Setter. Value >
< Controltemplate Targettype = "Listboxitem" >
< Border >
< Border. Background >
< Lineargradientbrush Startpoint = "0, 0" Endpoint = "1, 0" >
< Gradientstop Offset = "0" Color = "Orangered" />
< Gradientstop Offset = "1" Color = "Brown" />
</ Lineargradientbrush >
</ Border. Background >
< Textblock Text =" {Templatebinding content} " Texttrimming = "Characterellipsis" />
</ Border >
</ Controltemplate >
</ Setter. Value >
</ Setter >
</ Style >
< Style Targettype = "ListBox" >
< Setter Property = "Template" >
< Setter. Value >
< Controltemplate >
< Scrollviewer Borderbrush =" {Templatebinding borderbrush} " Borderthickness =" {Templatebinding borderthickness} " >
< Viewbox Verticalalignment = "TOP" >
< Stackpanel Width =" {Templatebinding width} " Isitemshost = "True" />
</ Viewbox >
</ Scrollviewer >
</ Controltemplate >
</ Setter. Value >
</ Setter >
</ Style >
</ Page. Resources >
< Wrappanel >
< ListBox
Width = "120"
Height = "220"
Margin = "8"
Borderbrush = "Blue"
Borderthickness = "3"
Horizontalcontentalignment = "Stretch" >
< Listboxitem > 1111111111
</ Listboxitem >
< Listboxitem > 22222222222222222222
</ Listboxitem >
< Listboxitem > 333333333333333333333333333333333333
</ Listboxitem >
< Listboxitem > 44444444444444444444444444444444444444444
</ Listboxitem >
</ ListBox >
< ListBox
Width = "180"
Height = "220"
Margin = "8"
Borderbrush = "Green"
Borderthickness = "3"
Horizontalcontentalignment = "Stretch" >
< Listboxitem > 1111111111
</ Listboxitem >
< Listboxitem > 22222222222222222222
</ Listboxitem >
< Listboxitem > 333333333333333333333333333333333333
</ Listboxitem >
< Listboxitem > 44444444444444444444444444444444444444444
</ Listboxitem >
</ ListBox >
</ Wrappanel >
</ Page >

 

Effect:

Here I have also redefined a template for ListBox and Set width binding for its listboxitem host container stackpanel. The problem still cannot be solved here, the content that is too wide may not exceed the container width and bring out the horizontal scroll bar.

Then I added a viewbox to the perimeter of stackpanel, and the problem was solved magically. However, I am still confused ~~

In addition, a new problem arises. I have set the border binding attribute in the template: "<scrollviewer borderbrush =" {templatebinding borderbrush} "borderthickness =" {templatebinding borderthickness} ">", a three-pixel border of different colors was created for them at The ListBox definition, however, this does not work. You cannot see the border of ListBox ~ I don't know what is going on.

Who can explain the difference ~