In WPF, itemscontrol is used for nested binding, an itemscontrol is nested in itemscontrol, and then bound (2) is used)

To adapt to the display with different resolutions, bind the width attribute of the first ememplate to systemparameters. primaryscreenwidth, which is actually implemented by converter (see source ).

 

The width attribute of the datatemplate of itemscontrol on the second layer also wants to be bound to systemparameters. primaryscreenwidth, so a converter is also customized. <Local: myconverter2 X: Key = "c2itemw"/>.

 

It should be noted that if the two-layer ememplate declares a resource, the binding of the Second-layer datatemplate always does not work (maybe my method is incorrect ). If the second layer is proposed, it is separately used as a resource statement. You can use itemtemplate in the datatemplate at the first layer.

 

The following source:

Master itemscontrol:

 <  Itemscontrol  Background  = "Green"  Itemtemplate ="  {Staticresource xitemtemplate}  "  >                  <  Itemscontrol. itemspanel  >                      <  Itemspaneltemplate  >                          <  Stackpanel  Orientation  = "Horizontal"  Verticalalignment  = "Center" />                      </  Itemspaneltemplate  >                  </  Itemscontrol. itemspanel  >                              </  Itemscontrol  > 

 

The resource of the first datatemplate:

 <  Datatemplate  X: Key  = "Xitemtemplate"  Datatype ="  {X: type local: Items}  "  >

  <! --  The second layer of datatemplate is specified here.  -->  <  Itemscontrol  Itemssource  ="  {Binding subitems}  "   
Itemtemplate  ="  {Staticresource xitemsbase} "   
Horizontalcontentalignment  = "Center"   
Scrollviewer. horizontalscrollbarvisibility  = "Hidden"  >  <  Itemscontrol. itemspanel  >  <  Itemspaneltemplate  >  <  Stackpanel  Orientation = "Horizontal"  Verticalalignment  = "Center"   
Horizontalalignment  = "Center"
  Width  ="  {Binding converter = {staticresource convert2basepanelwidth }}  "
  Margin  = "133,0"  />  </  Itemspaneltemplate >  </  Itemscontrol. itemspanel  >  </  Itemscontrol  >  </  Datatemplate  > 

 

Layer 2 ememplate:

 <  Local: myconverter1  X: Key  = "Convert2basepanelwidth"  /> <  Local: myconverter2  X: Key  = "Convert2itemwidth"  />  <  Datatemplate  X: Key  = "Xitemsbase"  >      <  Datatemplate. Resources  >          <  Style  Targettype ="  {X: type border}  "  >              <  Setter  Property  = "Borderbrush"  Value  = "Orange"  />              <  Style. triggers  >                  <  Trigger  Property = "Ismouseover"  Value  = "True"  >                      <  Trigger. enteractions  >                          <  Beginstoryboard  >                              <  Storyboard  >                                  <  Thicknessanimation  Storyboard. targetproperty = "Margin"  To  = "0"  Duration  = "0: 0:. 2"  />                                  <  Thicknessanimation  Storyboard. targetproperty  = "Borderthickness"  To  = "1.5"  Duration  = "0: 0:. 15"  />                              </ Storyboard  >                          </  Beginstoryboard  >                      </  Trigger. enteractions  >                      <  Trigger. exitactions  >                          <  Beginstoryboard  >                              <  Storyboard >                                  <  Thicknessanimation  Storyboard. targetproperty  = "Margin"  To  = "4"  Duration  = "0: 0:. 2"  />                                  <  Thicknessanimation  Storyboard. targetproperty  = "Borderthickness"  To  = "3" Duration  = "0: 0:. 15"  />                              </  Storyboard  >                          </  Beginstoryboard  >                      </  Trigger. exitactions  >                  </  Trigger  >              </  Style. triggers >          </  Style  >      </  Datatemplate. Resources  >      <  Stackpanel  Orientation  = "Vertical"  Width  ="  {Binding converter = {staticresource convert2itemwidth }}  "  Verticalalignment = "Center"  Horizontalalignment  = "Center"  >          <  Border  Borderthickness  = "3"  Cornerradius  = "7"  Margin  = "4, 0"  >              <  Image  Source  =" {Binding image}  "  Stretch  = "Uniform"  Mouseenter  = "Image_mouseenter"  Mouseleave  = "Image_mouseleave"  />          </  Border  >          <  Textblock  Text  =" {Binding name}  "  Margin  = "4, 0"  Fontsize  = "16"  Horizontalalignment  = "Center"  Verticalalignment  = "TOP"  Fontfamily  = "Segoe UI"  />      </  Stackpanel  > </  Datatemplate  > 

After:

You can flip the pages left and right, and the number of projects on each page is displayed based on the defined list.