question

PaulaMorgan-3461 avatar image
0 Votes"
PaulaMorgan-3461 asked ·

[UWP][C#] Font size in UI controls - datagrid and listbox

How can I change the font size of the header column of the datagrid? Microsoft.Toolkit.Uwp.UI.Controls.DataGrid

I also find that I cannot change the font size of the contents of a listbox either. I need to do both in code...not xaml.

Thanks, Paula

uwp
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

NicoZhu-MSFT avatar image
0 Votes"
NicoZhu-MSFT answered ·

How can I change the font size of the header column of the datagrid?

The header of DataGrid is DataGridColumnHeader that under Microsoft.Toolkit.Uwp.UI.Controls.Primitives name space. you could edit the default style like the following:

alt text

Edit in code behind

For example, if i want to modify the first column header's fontsize.

 var colum = MyDataGrid.Columns[0] as DataGridBoundColumn;
 var headerstyle = new Style(typeof(DataGridColumnHeader));
 headerstyle.Setters.Add(new Setter(DataGridColumnHeader.FontSizeProperty, 12));  
 colum.HeaderStyle = headerstyle;

I also find that I cannot change the font size of the contents of a listbox either.

For ListBox content, we suggest you use binding that bind the FontSize with a value that comes from your data model or code behind.

For code behind

 public int MyFontSize { get; set; }
 
 public MainPage()
 {
     this.InitializeComponent();
     this.DataContext = this;
     MyFontSize = 25;
 }

Xaml (and RootPage is page name)

alt text


· 1 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you very much for the information! I got the data grid font working.

I'm still having an issue with the listbox though. I create it completely in c# - no xaml, so I'm not sure how to apply your suggestion above. I tried to create the data template in code and then set it to the listbox's datatemplate property but it's still not working.

Sorry, if I'm missing something simple and thanks again for the help.

0 Votes 0 · ·
PaulaMorgan-3461 avatar image
0 Votes"
PaulaMorgan-3461 answered ·

I was able to solve my problem by creating the xaml in code and setting it to the listbox's itemtemplate:

alt text

Then for the listbox:

 DataTemplate datatemplate = (DataTemplate)XamlReader.Load(GetDataTemplate().ToString());
 
             ItemTemplate = datatemplate;



code.png (19.0 KiB)
· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.