ListView change text size in Metro Apps - c#

I'm not sure why I'm finding it so difficult to find information on this, but I have no clue how to change the item text size of each item inside a list view.
I don't know if I'm googling the right thing but I can't seem to find an answer to this, or really anything in general about styling elements properly.
I tried doing FontSize in the ListView but it changes nothing.
Sorry for such a mundane question but I can't find anything about this.
Thanks

You need to change listview item style i.e itemcontainerstyle like this
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontSize" Value="25"/>
<Setter Property="FontFamily" Value="Segoe Ui Light"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
or you can edit listviewitem style template also which is available on Msdn.

Related

UWP listview mutiple ItemContainerStyle

How can I have my ListView have multiple ItemContainerStyle?
<ListView x:Name="SongsListView">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<!--<Style TargetType="ListViewItemPresenter">
<Setter Property="SelectedPointerOverBackground" Value="White" />
</Style>-->
</ListView.ItemContainerStyle>
</ListView>
The way you're trying to add multiple styles doesn't make any sense. You can't have more than one Style applied on a control at the same time. There is no point in doing that. However you can ask UWP to apply one of the many Styles programmatically.
UWP, just like WPF, supports ItemContainerStyleSelector. This is a simple class that allows you to select a Style based on some condition or procedure. You may check one working example here.

TextBox border radius style in WPF

I checked similar questions but I couldn't figure out the underlying logic.
I am trying to add CornerRadius to a TextBox in a WPF project.
Here's what I tried so far:
In App.xaml I created a Style that I intend to reuse:
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="27"/>
<Setter Property="Padding" Value="5.5"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
Adding: <Setter Property="Border.CornerRadius" Value="5"/> didn't work. However, the following worked, but with side effects (all borders where rounded):
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="5"/>
</Style>
I want to keep the styles separate and basically use them like this:
<TextBox x:Name="ExampleTb" Style="{StaticResource TextBoxStyle}"/>
Can you please help me/ point me in the right direction?
It is actually very simple to achieve this, just follow these steps:
Step 1. Add a textbox to your window, right click on your textbox and select "Edit Template \ Edit a Copy..."
This will take you to the control template designer.
Step 2. Check this picture:
https://postimg.org/image/9h5ng8p9t/
P.S. I find blend better suited to design controls.

Change foreground color of ComboBoxItem when ComboBox is hovered

At the moment, I'm styling WPF controls. This is how my custom <Button> looks hovered.
And this is how <ComboBox> looks when mouse is over it.
Simply, I want to be able to change foreground color of currently selected ComboBoxItem when whole ComboBox is hovered. In this example, I'd like to have similiar yellow color like on <Button> control.
The problem is, that <ComboBox> has different ControlTemplates for ComboBox item and toggle button. I don't know how to interact between those two.
The template for <ComboBox> is pretty big, so I'm not going to post it here. Also, you don't have to post full answer if it's not required to explain the problem.
OK, I found a solution. You need to edit default ComboBox templates.
In Visual Studio 2013 you can get a default template in Designer by clicking right mouse button on ComboBox -> Edit template -> Edit a copy...
In <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}"> you have to add a following trigger:
<ControlTemplate.Triggers>
...
<Trigger Property="IsMouseOver" TargetName="toggleButton" Value="true">
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="Yellow" />
</Trigger>
...
</ControlTemplate.Triggers>
Also, apply a style to ComboBoxItem:
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Foreground" Value="Black"/>
</Style>
Now, it works like a charm.

Binding error from the treeview control

I faced one issue and I would really appreciate it if you could provide any advice for this.
Error message:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference 'RelativeSource FindAncestor,
AncestorType='System.Windows.Controls.ItemsControl',
AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment;
DataItem=null; target element is 'TreeViewItem' (Name=''); target
property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
I have a treeview control (C# WPF .NET 4.0), and several items are added into this treeview by using datatemplate in xaml or manually, and both uses data binding.
When new data structure is received, I need to clean all items in treeview and regenerate new one by treeview_Control.Items.Clear() and it seems working fine from GUI point of view, but when I see output window on Visual Studio it shows several error messages as like above.
I've tried to search for a solution and tried several methods but no luck yet. Someone just recommended to just ignore this error message, but I just really want to clear this up.
If you have any idea, please help me for this.
Sorry, This is a comment but I cant fit in the comment section
Can you try add a ItemContainerStyle on the TreeView and see if it fixes the error, we had the same issue in a ListView and this was the only workaround we could find to remove the error.
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
</TreeView.ItemContainerStyle>
I had same problem.When I was removing items from treeview via ViewModel ,I was receiving same harmless error messages.
I have defined style for TreeViewItem in UserControl.Resources.
In that style are also setters for content alignments.
<Style TargetType="TreeViewItem" x:Key="myTreeViewItemStyle"
BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
...</Style>
What did help to me was addint ItemContainerStyle referenc in TreeView.
<TreeView ItemsSource="{Binding Items}" ItemContainerStyle="{StaticResource ResourceKey=myTreeViewItemStyle}">
I finally found a solution that works for me. I first added a global style to my App.xaml:
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
I also had to add the following to my TreeView:
<TreeView.ItemContainerStyle>
<Style
BasedOn="{StaticResource {x:Type TreeViewItem}}"
TargetType="{x:Type TreeViewItem}">
</Style>
</TreeView.ItemContainerStyle>
For some reason, the BasedOn attribute was the missing piece in my case.

How do I know whether to use a style or override a control template?

This question is inspired by this recent question and other situations I've encountered in my WPF development. How do I know whether it is enough to set a style on a control to override some default behavior vs creating a new control template?
More concretely, in the question above, the author wants to change the look of a ListBoxItem when it is selected. (See code reprinted below). Everything works, except the Background property. How is one supposed to know that they should override the Control Template for this?
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Content" Value="{Binding Path=Name}"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
As to whether to use a style or template Ray provided a great response.
As to how to solve your problem without creating a template, maybe I can help.
The background color is being set by the SystemColors. Using Blend and creating a template you can see the exact xaml.
So if NO TEMPLATES! is a requirement you can always change what that resource is.
Example :
<ListBox>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Yellow" />
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Content" Value="{Binding Path=Name}"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBoxItem>Test 1</ListBoxItem>
<ListBoxItem>Test 2</ListBoxItem>
<ListBoxItem>Test 3</ListBoxItem>
</ListBox>
That will give you the background color for that given ListBox and not screw up anything else in the app.
Styles can be thought of very closely to CSS styles in HTML. If all you want to do is change the basic properties of a control such as Background, Foreground or whatever properties it exposes then a Style is exactly what you need. Styles also allow you to apply triggers so for animations, a style is also sufficient.
If you're finding you want to change the intrinsice behaviours / inner workings on a control then a control template is what you want. For example, if you want to change how a button is laid out by adding some sort of grid behaviour, then using a control template is the way forward.
Unfortunately, for your specific example, you don't know unless you try it. Basically you first try it with a Style....and if that doesn't work for whatever reason, then you write a ControlTemplate. You usually only end up writing ControlTemplates for the reasons Ray mentioned.
My guess is that the trigger you're trying to set has also been hardcoded in the ControlTemplate...which is bad design imo because it prevents the Style from overriding it.
By "Background" I take it to mean the "blue" rectangle that surrounds the ListBoxItem when it is selected?
This is actually the FocusVisualStyle property, which is a style that describes what the item should look like when it is focused. The Control explicitly sets this property (described here), so in order to override it, you will have to redefine the Control Template, making sure to use a default Style setter to set it to {x:Null}.

Categories