ListView Scrollbar Styling - wpf

I am working on a WPF project. I need to customize the horizontal scrollbar of Listview,like reducing its height,changing background etc. How do I achieve this?
Using this, doesn't seem to have any effect:
<ListView>
<ListView.Resources>
<Style TargetType="ScrollBar">
<Setter Property="Height" Value="10"/>
</Style>
</ListView.Resources>
</ListView>

If you want to modify the width and height of the bars, you can take a look at this question, which points you in the direction of using System.Windows.SystemParameters to modify those values.
However I think you require more complex styling (e.g. change the background) so I'm afraid you will need to play with control template parts. Check these two links (found in the answer to this question):
Styling A ScrollViewer/Scrollbar In WPF
Styling the WPF ScrollViewer

Related

WPF button text scrolling on mouse over

is it possible for buttons that have longer Content(text) than the max button width to kinda scroll the remaining text from right to left on mouse over? something like an electronic banner is the best I could explain it.
as of now this is the only thing that reflects my button style xaml.
<Page.Resources>
<Style x:Key="Str" TargetType="{x:Type Button}">
<Setter Property="Width" Value="90"/>
</Style>
</Page.Resources>
Yes. That's usually called marquee.
You can template a wpf control to do just about anything.
Put a canvas in there and a textblock. Animate the canvas.Left of the textblock.
There's a marquee implementation here:
https://social.technet.microsoft.com/wiki/contents/articles/31416.wpf-mvvm-friendly-user-notification.aspx?Redirected=true#Marquee
You would, obviously, want to start the animation using a datatrigger and ismouseover true.

Need to be able to see the header in a tabitem of a tabcontrol

We're working on a new WPF app, using the ModernUI framework for styling. Apparently one of the styles it enforces is hiding the header of a TabItem in a TabControl. For most of what we're doing that's exactly what we want, but there are times where I want to show that header to the user. Since I don't know how ModernUI is hiding/collapsing the TabItem, I don't know how to show it.
How do I show the header of a tabitem, of a tabcontrol under these circumstances?
I got help from a co-worker. It was just an issue of styling the tabitem through the tabcontrol's resources:
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Visibility" Value="Visible" />
</Style>
</TabControl.Resources>
I didn't think this would work because I had problems with trying to do styles under ModernUI régime. But in this case it let me.

WPF: Why are nested styles not always working?

I'm trying to apply a nested WPF style to a Toolbar. I'd like to have all children of the Toolbar (MenuItems, Buttons, ToggleButtons etc.) to have the specified style.
The problem is, that the nested style definition is applied correctly to some controls like MenuItems, but not to Buttons.
What am I doing wrong?
The MenuItem is correctly placed at the bottom of the Toolbar, but the ToggleButton is in the middle:
<Window.Resources>
<Style x:Key="MyToolbarStyle" TargetType="ToolBar">
<!-- Setters for Toolbar properties -->
<Setter Property="Height" Value="80" />
<!-- Nested setters for children of the Toolbar -->
<Style.Resources>
<Style TargetType="MenuItem">
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style TargetType="ToggleButton">
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
</Style.Resources>
</Style>
</Window.Resources>
<Grid >
<ToolBar VerticalAlignment="Top" Style="{StaticResource MyToolbarStyle}">
<MenuItem Header="MyMenuItem" /> <!-- Appears on the bottom like defined in the style-->
<ToggleButton Content="MyToggleButton" /> <!-- Nested style does not seem to be applied-->
</ToolBar>
</Grid>
The WPF ToolBar is a special type of control that defines some custom styles for some WPF controls like Button, ToggleButton... full list here, you can identify them by ElementName + StyleKey property name. If you'd like to change a default style for a specific control you will have to modify one of these styles.
Try replacing your style for the ToggleButton with the following:
<Style x:Key="{x:Static ToolBar.ToggleButtonStyleKey}" TargetType="ToggleButton">
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
What you are doing wrong is thinking that WPF Styles are like CSS styles. In WPF, Styles are just not used that way. Sure, if we could, we'd probably save a few lines of XAML, but we can't. The best that we can do is what you have done... I'm assuming that you've created a Style for a top level element like Control. As you have seen, not all controls will extend the Control class, so the Style won't be applied to all of them.
Instead, Styles in WPF are more like the .class styles in CSS... one Style per type and then we can apply a further Style per UI element. There are lots of situations like this in WPF where we wish we could write less code, but it is how it is and the sooner that everybody realises it, the better.
UPDATE >>>
In response to your first comment, you seem to be mistaken. Just to clarify, if what you are calling nested Styles are the Styles that you defined in the outer Style.Resources section, then there is nothing wrong with that... no problem what-so-ever. Just take those inner Styles out of the Resources section and you will see the same UI.
Now you're probably thinking of changing your question title to something like 'Why isn't my default ToggleButton Style being applied inside a ToolBar control?'. While I can't say for sure, I can only assume that this behaviour is caused by a Style that has been defined within the ToolBar ControlTemplate.
I'm thinking that because of the following points:
A custom implicit Style (no x:Key) will not work inside the ToolBar control.
A custom explicit Style (named) will work as expected inside the ToolBar control.
A Style property set on the element will work as expected inside the ToolBar control.

Xaml Grid Styling

New to WPF, I'm having some trouble creating a styles in my code, I was able to make some buttons styles by drawing rectangles and making them into buttons, this opened a template editor so I was able to do it.
Now I'm wanting to create a template for a repeating stackpanel/grid layout, and I wrote it by hand this time, but I am getting an error that says the "template is not a valid member"
This is the kind of thing I was trying to create, but the Property="Template" bit is underlined in red. Can somebody explain to me the reason behind this? How do I create or initialize the template?
<Style x:Key="LaneStyle" TargetType="{x:Type Grid}">
<Setter Property="Width" Value="760"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Grid}">
<!-- Things here -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If someone could direct me to a tutorial on styles/templates that would be nice as well, haven't been able to find one that explained it in more detail.
Grid is not a control, therefore you cannot apply a ControlTemplate to it. If you're looking for a "repeater" kind of thing, you should be using an ItemsControl.
The best way to create templates/styles is by using Microsoft Blend 3.0/4.0
Over there one can easily find out what's the progress after doing each change.
In your case, a grid cannot be styled as it is a container not a control. If you wish to customize some control need to modify the control template of the control.

silverlight 3.0 grid row selector color

is it possible to specify the color for the row selector in silverlight grid
Yes but you need to copy the control template for the DataGridRowHeader control and place it in a Style object in a resource:-
<UserControl.Resources>
<Style x:Key="CustomRowHeader" TargetType="DataGridRowHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="localprimitives:DataGridRowHeader">
<!-- Copy of the rest of the standard controls template -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<UserControl.Resources>
<DataGrid RowHeaderStyle="{StaticResouce CustomRowHeader}" ... >
Now you can fiddle around with the color value and pretty much anything else that is used to render the row selector.
You can probably do this with Blend fairly well if you have it and are familiar with using it. I prefer to copy the template from the documentation. See DataGrid Styles and Templates
No, but it's perfectly possible to subdivide a grid into rows/columns and fill them with rectangles+background or something like that.

Resources