Remove ChildContent wrapper requirement for DataList style elements (#318)

Copilot · csharpfritz · web-flow · commit 51d6b3daa20d · 2026-01-31T09:18:58.000-05:00
* Initial plan

* Simplify DataList style elements - remove ChildContent wrapper requirement

Co-authored-by: csharpfritz &lt;78577+csharpfritz@users.noreply.github.com&gt;

* Add IDataListStyleContainer interface to eliminate reflection and improve type safety

Co-authored-by: csharpfritz &lt;78577+csharpfritz@users.noreply.github.com&gt;

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: csharpfritz &lt;78577+csharpfritz@users.noreply.github.com&gt;
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/FooterStyle.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/FooterStyle.razor
@@ -12,9 +12,9 @@
 					EnableViewState="false"
 					Context="Item"
 					ItemType="SharedSampleObjects.Models.Widget">
-	<ChildContent>
+	<FooterStyleContent>
 		<BlazorWebFormsComponents.FooterStyle BackColor="Blue" ForeColor="White"></BlazorWebFormsComponents.FooterStyle>
-	</ChildContent>
+	</FooterStyleContent>
 	<FooterTemplate>Simple Widgets</FooterTemplate>
 	<ItemTemplate>
 		@Item.Name - @Item.Price.ToString("c")
@@ -34,9 +34,9 @@
 					FooterStyle-BorderWidth="2"
 					SelectMethod="GetWidgets"
 					ItemType="SharedSampleObjects.Models.Widget">
-	<ChildContent>
+	<FooterStyleContent>
 		<BlazorWebFormsComponents.FooterStyle BackColor="Blue"></BlazorWebFormsComponents.FooterStyle>
-	</ChildContent>
+	</FooterStyleContent>
 	<FooterTemplate>Simple Widgets</FooterTemplate>
 	<ItemTemplate>
 		@Item.Name - @Item.Price.ToString("c")
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/HeaderStyle.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/HeaderStyle.razor
@@ -12,9 +12,9 @@
 					EnableViewState="false"
 					Context="Item"
 					ItemType="SharedSampleObjects.Models.Widget">
-	<ChildContent>
+	<HeaderStyleContent>
 		<BlazorWebFormsComponents.HeaderStyle BackColor="Blue" ForeColor="White"></BlazorWebFormsComponents.HeaderStyle>
-	</ChildContent>
+	</HeaderStyleContent>
 	<HeaderTemplate>Simple Widgets</HeaderTemplate>
 	<ItemTemplate>
 		@Item.Name - @Item.Price.ToString("c")
@@ -34,9 +34,9 @@
 					HeaderStyle-BorderWidth="2"
 					SelectMethod="GetWidgets"
 					ItemType="SharedSampleObjects.Models.Widget">
-	<ChildContent>
+	<HeaderStyleContent>
 		<BlazorWebFormsComponents.HeaderStyle BackColor="Blue"></BlazorWebFormsComponents.HeaderStyle>
-	</ChildContent>
+	</HeaderStyleContent>
 	<HeaderTemplate>Simple Widgets</HeaderTemplate>
 	<ItemTemplate>
 		@Item.Name - @Item.Price.ToString("c")
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DataList/Index.razor
@@ -14,9 +14,9 @@
 							ItemType="SharedSampleObjects.Models.Widget">
             <HeaderTemplate>Simple Widgets</HeaderTemplate>
             <FooterTemplate>End of Line</FooterTemplate>
-      <ChildContent>
+      <ItemStyleContent>
         <ItemStyle BackColor="Wheat" />
-      </ChildContent>
+      </ItemStyleContent>
 			<ItemTemplate>
                     @Item.Name - @Item.Price.ToString("c")
 			</ItemTemplate>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/FooterStyleClass.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/FooterStyleClass.razor
@@ -10,9 +10,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<FooterStyleContent>
 					<FooterStyle CssClass="myClass"></FooterStyle>
-				</ChildContent>
+				</FooterStyleContent>
 				<FooterTemplate>FooterTemplate</FooterTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/FooterStyleStyle.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/FooterStyleStyle.razor
@@ -12,9 +12,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<FooterStyleContent>
 					<FooterStyle BackColor="Blue" BorderStyle="Solid" BorderColor="Black" BorderWidth="2"></FooterStyle>
-				</ChildContent>
+				</FooterStyleContent>
 				<FooterTemplate>FooterTemplate</FooterTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleClass.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleClass.razor
@@ -12,9 +12,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<HeaderStyleContent>
 					<HeaderStyle CssClass="myClass"></HeaderStyle>
-				</ChildContent>
+				</HeaderStyleContent>
 				<HeaderTemplate>My Widget List</HeaderTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
@@ -38,9 +38,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<HeaderStyleContent>
 					<HeaderStyle></HeaderStyle>
-				</ChildContent>
+				</HeaderStyleContent>
 				<HeaderTemplate>My Widget List</HeaderTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleFont.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleFont.razor
@@ -12,9 +12,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<HeaderStyleContent>
 					<HeaderStyle Font-Bold="true" Font-Italic="true" Font-Names="arial black" Font-Overline="true" Font-Size="X-Large" Font-Strikeout="true" Font-Underline="true" />
-				</ChildContent>
+				</HeaderStyleContent>
 				<HeaderTemplate>My Widget List</HeaderTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleTest.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/HeaderStyleTest.razor
@@ -12,9 +12,9 @@
 								ItemType="Widget"
 								RepeatLayout="Flow"
 								Context="Item">
-				<ChildContent>
+				<HeaderStyleContent>
 					<HeaderStyle BackColor="Blue" BorderStyle="Solid" BorderColor="Black" BorderWidth="2"></HeaderStyle>
-				</ChildContent>
+				</HeaderStyleContent>
 				<HeaderTemplate>My Widget List</HeaderTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
 			</DataList>
diff --git a/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/ItemStyleTest.razor b/src/BlazorWebFormsComponents.Test/DataList/FlowLayout/ItemStyleTest.razor
@@ -12,9 +12,9 @@
 								Context="Item">
 				<HeaderTemplate>My Widget List</HeaderTemplate>
 				<ItemTemplate>@Item.Name</ItemTemplate>
-				<ChildContent>
+				<ItemStyleContent>
 					<ItemStyle BackColor="Red" />
-				</ChildContent>
+				</ItemStyleContent>
 			</DataList>
 		);
 
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/FooterStyleClass.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/FooterStyleClass.razor
@@ -5,9 +5,9 @@
     public void DataList_TableLayout_FooterStyleClass_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <FooterStyleContent>
                 <FooterStyle CssClass="myClass"></FooterStyle>
-            </ChildContent>
+            </FooterStyleContent>
             <FooterTemplate>FooterTemplate</FooterTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/FooterStyleStyle.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/FooterStyleStyle.razor
@@ -7,9 +7,9 @@
     public void DataList_TableLayout_FooterStyleStyle_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <FooterStyleContent>
                 <FooterStyle BackColor="Blue" BorderStyle="Solid" BorderColor="Black" BorderWidth="2"></FooterStyle>
-            </ChildContent>
+            </FooterStyleContent>
             <FooterTemplate>FooterTemplate</FooterTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleCss.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleCss.razor
@@ -7,9 +7,9 @@
     public void DataList_TableLayout_HeaderStyleCss_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <HeaderStyleContent>
                 <HeaderStyle CssClass="myClass"></HeaderStyle>
-            </ChildContent>
+            </HeaderStyleContent>
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
@@ -24,9 +24,9 @@
     public void DataList_TableLayout_HeaderStyleCss_Null_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <HeaderStyleContent>
                 <HeaderStyle></HeaderStyle>
-            </ChildContent>
+            </HeaderStyleContent>
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleFont.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleFont.razor
@@ -7,9 +7,9 @@
     public void DataList_TableLayout_HeaderStyleFont_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <HeaderStyleContent>
                 <HeaderStyle Font-Bold="true" Font-Italic="true" Font-Names="arial black" Font-Overline="true" Font-Size="X-Large" Font-Strikeout="true" Font-Underline="true" />
-            </ChildContent>
+            </HeaderStyleContent>
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleTest.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleTest.razor
@@ -7,9 +7,9 @@
     public void DataList_TableLayout_HeaderStyle_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <HeaderStyleContent>
                 <HeaderStyle BackColor="@("#0000ff")" BorderStyle="Solid" BorderColor="Black" BorderWidth="2"></HeaderStyle>
-            </ChildContent>
+            </HeaderStyleContent>
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleWrap.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/HeaderStyleWrap.razor
@@ -7,9 +7,9 @@
     public void DataList_TableLayout_HeaderStyleWrap_RendersCorrectly()
     {
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
-            <ChildContent>
+            <HeaderStyleContent>
                 <HeaderStyle BackColor="@("#0000ff")" Wrap="false"></HeaderStyle>
-            </ChildContent>
+            </HeaderStyleContent>
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
         </DataList>);
diff --git a/src/BlazorWebFormsComponents.Test/DataList/TableLayout/ItemStyleTest.razor b/src/BlazorWebFormsComponents.Test/DataList/TableLayout/ItemStyleTest.razor
@@ -7,9 +7,9 @@
         var cut = Render(@<DataList Items="Widget.SimpleWidgetList" ItemType="Widget" RepeatLayout="Table" Context="Item">
             <HeaderTemplate>My Widget List</HeaderTemplate>
             <ItemTemplate>@Item.Name</ItemTemplate>
-            <ChildContent>
+            <ItemStyleContent>
                 <ItemStyle BackColor="Red" />
-            </ChildContent>
+            </ItemStyleContent>
         </DataList>);
 
         cut.FindAll("td").Count().ShouldBe(Widget.SimpleWidgetList.Length+1);
diff --git a/src/BlazorWebFormsComponents/AlternatingItemStyle.razor.cs b/src/BlazorWebFormsComponents/AlternatingItemStyle.razor.cs
@@ -1,14 +1,20 @@
-﻿using Microsoft.AspNetCore.Components;
+﻿using BlazorWebFormsComponents.Interfaces;
+using Microsoft.AspNetCore.Components;
 
 namespace BlazorWebFormsComponents
 {
 	public partial class AlternatingItemStyle : UiTableItemStyle
 	{
-		[CascadingParameter(Name = "AlternatingItemStyle")]
-		protected TableItemStyle theAlternatingItemStyle
+		[CascadingParameter(Name = "ParentDataList")]
+		protected IDataListStyleContainer ParentDataList { get; set; }
+
+		protected override void OnInitialized()
 		{
-			get { return base.theStyle; }
-			set { base.theStyle = value; }
+			if (ParentDataList != null)
+			{
+				theStyle = ParentDataList.AlternatingItemStyle;
+			}
+			base.OnInitialized();
 		}
 	}
 }
diff --git a/src/BlazorWebFormsComponents/DataList.razor b/src/BlazorWebFormsComponents/DataList.razor
@@ -7,16 +7,12 @@
 {
 	var IndexedItems = ElementIndex(RepeatColumns, Items, RepeatDirection);
 
-	<CascadingValue Name="HeaderStyle" Value="HeaderStyle">
-		<CascadingValue Name="FooterStyle" Value="FooterStyle">
-			<CascadingValue Name="ItemStyle" Value="ItemStyle">
-				<CascadingValue Name="AlternatingItemStyle" Value="AlternatingItemStyle">
-					<CascadingValue Name="SeparatorStyle" Value="SeparatorStyle">
-						@ChildContent
-					</CascadingValue>
-				</CascadingValue>
-			</CascadingValue>
-		</CascadingValue>
+	<CascadingValue Name="ParentDataList" Value="this" IsFixed="true">
+		@HeaderStyleContent
+		@FooterStyleContent
+		@ItemStyleContent
+		@AlternatingItemStyleContent
+		@SeparatorStyleContent
 	</CascadingValue>
 
 	@switch (RepeatLayout)
diff --git a/src/BlazorWebFormsComponents/DataList.razor.cs b/src/BlazorWebFormsComponents/DataList.razor.cs
@@ -1,13 +1,14 @@
 ﻿using BlazorComponentUtilities;
 using BlazorWebFormsComponents.DataBinding;
 using BlazorWebFormsComponents.Enums;
+using BlazorWebFormsComponents.Interfaces;
 using Microsoft.AspNetCore.Components;
 using System.Collections.Generic;
 using System.Linq;
 
 namespace BlazorWebFormsComponents
 {
-	public partial class DataList<ItemType> : DataBoundComponent<ItemType>, IStyle
+	public partial class DataList<ItemType> : DataBoundComponent<ItemType>, IStyle, IDataListStyleContainer
 	{
 		private static readonly Dictionary<DataListEnum, string?> _GridLines = new Dictionary<DataListEnum, string?> {
 			{DataListEnum.None, null },
@@ -25,18 +26,22 @@ public partial class DataList<ItemType> : DataBoundComponent<ItemType>, IStyle
 		[Parameter] public DataListEnum GridLines { get; set; } = DataListEnum.None;
 		[Parameter] public RenderFragment HeaderTemplate { get; set; }
 		[Parameter] public RenderFragment FooterTemplate { get; set; }
-		[CascadingParameter(Name = "HeaderStyle")] private TableItemStyle HeaderStyle { get; set; } = new TableItemStyle();
-		[CascadingParameter(Name = "FooterStyle")] private TableItemStyle FooterStyle { get; set; } = new TableItemStyle();
-		[Parameter] public RenderFragment ChildContent { get; set; }
-		[CascadingParameter(Name = "ItemStyle")] private TableItemStyle ItemStyle { get; set; } = new TableItemStyle();
+		public TableItemStyle HeaderStyle { get; internal set; } = new TableItemStyle();
+		public TableItemStyle FooterStyle { get; internal set; } = new TableItemStyle();
+		[Parameter] public RenderFragment HeaderStyleContent { get; set; }
+		[Parameter] public RenderFragment FooterStyleContent { get; set; }
+		public TableItemStyle ItemStyle { get; internal set; } = new TableItemStyle();
 		[Parameter] public RenderFragment<ItemType> ItemTemplate { get; set; }
 		[Parameter] public RenderFragment<ItemType> AlternatingItemTemplate { get; set; }
-		[CascadingParameter(Name = "AlternatingItemStyle")] private TableItemStyle AlternatingItemStyle { get; set; } = new TableItemStyle();
+		public TableItemStyle AlternatingItemStyle { get; internal set; } = new TableItemStyle();
 		[Parameter] public RepeatLayout RepeatLayout { get; set; } = BlazorWebFormsComponents.Enums.RepeatLayout.Table;
 		[Parameter] public DataListEnum RepeatDirection { get; set; } = BlazorWebFormsComponents.Enums.DataListEnum.Vertical;
 		[Parameter] public int RepeatColumns { get; set; } = 1;
-		[CascadingParameter(Name = "SeparatorStyle")] private TableItemStyle SeparatorStyle { get; set; } = new TableItemStyle();
+		public TableItemStyle SeparatorStyle { get; internal set; } = new TableItemStyle();
 		[Parameter] public RenderFragment SeparatorTemplate { get; set; }
+		[Parameter] public RenderFragment ItemStyleContent { get; set; }
+		[Parameter] public RenderFragment AlternatingItemStyleContent { get; set; }
+		[Parameter] public RenderFragment SeparatorStyleContent { get; set; }
 		[Parameter] public bool ShowHeader { get; set; } = true;
 		[Parameter] public bool ShowFooter { get; set; } = true;
 		[Parameter] public string Style { get; set; }
diff --git a/src/BlazorWebFormsComponents/FooterStyle.razor.cs b/src/BlazorWebFormsComponents/FooterStyle.razor.cs
@@ -1,14 +1,20 @@
-﻿using Microsoft.AspNetCore.Components;
+﻿using BlazorWebFormsComponents.Interfaces;
+using Microsoft.AspNetCore.Components;
 
 namespace BlazorWebFormsComponents
 {
 	public partial class FooterStyle : UiTableItemStyle
 	{
-		[CascadingParameter(Name = "FooterStyle")]
-		protected TableItemStyle TheFooterStyle
+		[CascadingParameter(Name = "ParentDataList")]
+		protected IDataListStyleContainer ParentDataList { get; set; }
+
+		protected override void OnInitialized()
 		{
-			get { return base.theStyle; }
-			set { base.theStyle = value; }
+			if (ParentDataList != null)
+			{
+				theStyle = ParentDataList.FooterStyle;
+			}
+			base.OnInitialized();
 		}
 	}
 }
diff --git a/src/BlazorWebFormsComponents/HeaderStyle.razor.cs b/src/BlazorWebFormsComponents/HeaderStyle.razor.cs
@@ -1,16 +1,22 @@
-﻿using Microsoft.AspNetCore.Components;
+﻿using BlazorWebFormsComponents.Interfaces;
+using Microsoft.AspNetCore.Components;
 
 namespace BlazorWebFormsComponents
 {
 
 	public partial class HeaderStyle : UiTableItemStyle
 	{
 
-		[CascadingParameter(Name = "HeaderStyle")]
-		protected TableItemStyle theHeaderStyle
+		[CascadingParameter(Name = "ParentDataList")]
+		protected IDataListStyleContainer ParentDataList { get; set; }
+
+		protected override void OnInitialized()
 		{
-			get { return base.theStyle; }
-			set { base.theStyle = value; }
+			if (ParentDataList != null)
+			{
+				theStyle = ParentDataList.HeaderStyle;
+			}
+			base.OnInitialized();
 		}
 
 	}
diff --git a/src/BlazorWebFormsComponents/Interfaces/IDataListStyleContainer.cs b/src/BlazorWebFormsComponents/Interfaces/IDataListStyleContainer.cs
diff --git a/src/BlazorWebFormsComponents/ItemStyle.razor.cs b/src/BlazorWebFormsComponents/ItemStyle.razor.cs
diff --git a/src/BlazorWebFormsComponents/SeparatorStyle.razor.cs b/src/BlazorWebFormsComponents/SeparatorStyle.razor.cs
