Develop Reference

WPF: Address nested styles by key

I have a fairly complex WPF UserControl that needs a lot of custom styling, and several different styles for the same control types. The same styles are not used in any other places.
I would like to use nested styles (using Style.Resources) as a sort of namespacing mechanism as follows:
Example user control:
<UserControl Style="{StaticResource AwesomeControl}>
<Grid>
<Button Style="{StaticResource ButtonA}"/>
<Button Style="{StaticResource ButtonB}"/>
</Grid>
</UserControl>
How I want to define my styles:
<ResourceDictionary>
<Style TargetType="UserControl" x:Key="AwesomeControl">
<Style.Resources>
<Style TargetType="Button" x:Key="ButtonA"> </Style>
<Style TargetType="Button" x:Key="ButtonB"> </Style>
</Style.Resources>
</Style>
</ResourceDictionary>
However, this does not work. From what I can tell, it does not seem possible to address nested styles by their key. (I have searched around a lot, but cannot find a single example doing something like this.)
I can make it work easily by removing the nesting of styles, keeping them all at top level. However, then I have to change their keys to something like AwesomeControlButtonA, etc. to distinguish them from other parts of the application
That does not seem ideal to me.
So my question is:
Is something like I am trying with the code above possible? If not, are there other ways of namespacing I can use to prevent awkward keys like AwesomeControlButtonA?

Maybe DynamicResource could solve your problem
<Grid>
<Button Style="{DynamicResource ButtonA}"/>
<Button Style="{DynamicResource ButtonB}"/>
</Grid>
In context:
<Grid>
<Grid.Resources>
<Style x:Key="AW" TargetType="UserControl">
<Style.Resources>
<Style TargetType="Button" x:Key="AB">
<Setter Property="Background" Value="Red" />
</Style>
<Style TargetType="Button" x:Key="BB">
<Setter Property="Background" Value="Yellow" />
</Style>
</Style.Resources>
</Style>
<Style x:Key="AR" TargetType="UserControl">
<Style.Resources>
<Style TargetType="Button" x:Key="AB">
<Setter Property="Background" Value="Green" />
</Style>
<Style TargetType="Button" x:Key="BB">
<Setter Property="Background" Value="Blue" />
</Style>
</Style.Resources>
</Style>
</Grid.Resources>
<StackPanel>
<UserControl Style="{StaticResource AW}">
<StackPanel>
<Button Content="A" Style="{DynamicResource AB}" />
<Button Content="A" Style="{DynamicResource BB}" />
</StackPanel>
</UserControl>
<UserControl Style="{StaticResource AR}">
<StackPanel>
<Button Content="A" Style="{DynamicResource AB}" />
<Button Content="A" Style="{DynamicResource BB}" />
</StackPanel>
</UserControl>
</StackPanel>
</Grid>

Making XAML layout dynamic

I am new to using XAML and C# in general so this is probably an easy question but I have my XAML as so
<Page
x:Class="Tournament_Director_Windows.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Tournament_Director_Windows"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="LightGray">
<Button Style="{StaticResource AddAppBarButtonStyle}" Foreground="#FF094AB2" Click="onAddNewBowlerClick" HorizontalAlignment="Right" RenderTransformOrigin="0.4,0.508" Margin="0,10,115,679"/>
<ListView Height="648" Width="377" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="itemListView" ItemClick="itemListView_ItemClick" ItemsSource="{Binding}" IsItemClickEnabled="True" Margin="225,110,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock TextWrapping="Wrap" Text="Bowlers" Height="54" Width="177" FontSize="50" Foreground="#FF094AB2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="225,10,964,704"/>
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="onSyncClick" Background="#FFF8FCFD" HorizontalAlignment="Right" Foreground="#FF094AB2" BorderBrush="#FFFBF9F9" Margin="0,10,10,679"/>
<ListView HorizontalAlignment="Left" Height="Auto" Width="220" Background="Silver" SelectionChanged="MenuListView_SelectionChanged">
<!--<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="#FF094AB2" />
<Setter Property="FontSize" Value="30" />
<Setter Property="Height" Value="75"/>
</Style>
</ListView.Resources>-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="#FF094AB2" />
<Setter Property="FontSize" Value="25" />
<Setter Property="Height" Value="75"/>
<Setter Property="Padding" Value="10"/>
</Style>
</ListView.ItemContainerStyle>
<x:String>Bowlers</x:String>
<x:String>Brackets</x:String>
<x:String>Scores</x:String>
</ListView>
<ScrollViewer Height="Auto" HorizontalAlignment="Stretch" Width="754" Margin="602,110,0,10">
</ScrollViewer>
</Grid>
my question is about the ScrollViewer at the end, I have it as a set width but what I want to do is have the width fill the rest of the screen from its set position next to my ListView so no matter what screen size you have it looks the same and there is not a big space if you have a bigger screen or it gets cut off because the screen is smaller.
How can I do that?

Try to use <ColumnDefinitions> with width property "Auto" or "*" and <RowDefinitions> with height property "Auto" or "*" for grid. In this case you can manage what part of your content has permanent size and what part will resize with a window.

Custom ListBox in WPF

I am trying to create a custom ListBox control in WPF for a chat Messenger. I am using an ellipse to show the online/offline user. The ellipse is to be displayed on left and some text in center of the ListBoxItem.
I want to set the ellipse fill propert to red/green based on some variable.
This is what I have done :
<ListBox Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">
<Ellipse.Triggers>
<Trigger Property="{Binding Online}" Value="True">
<Setter TargetName="ellipse" Property="Ellipse.Fill" Value="Green"/>
</Trigger>
</Ellipse.Triggers>
</Ellipse>
<TextBlock Text="{Binding text}"></TextBlock>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and in the code :
myList.Items.Add(new { text="Hello",Online="True" });
I am getting an error as
Cannot find the static member 'FillProperty' on the type 'ContentPresenter'.
What am I doing wrong here?

Obviously this is wrong: Property="{Binding Online}"
Also you should use a Style for triggers, no need to set TargetName, and you need to take precedence into consideration, and use a Setter for the default value.

you are actually misleading WPF with some of these concerns.
Binding A property on trigger will not work. you have to use DataTrigger insteed of Triggers.
Implementing Trigger on the Fly for any control. most of the times not work. So go with Styles.
While you are creating Ellipse in template make sure you have created enough size for it. So that can be visible to users.
try this.
<Window.Resources>
<Style x:Key="elstyle" TargetType="Ellipse">
<Setter Property="Height" Value="5"/>
<Setter Property="Width" Value="5"/>
<Setter Property="Fill" Value="Red"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Online}" Value="true">
<Setter Property="Fill" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Ellipse Name="ellipse" Margin="5" DockPanel.Dock="Left" Style="{DynamicResource elstyle}">
</Ellipse>
<TextBlock Text="{Binding Name}"></TextBlock>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
code behind .
public MainWindow()
{
Random r = new Random();
InitializeComponent();
for (int i = 0; i < 10; i++)
{
myList.Items.Add(new { Name = "Name" + i.ToString(), Online = Convert.ToBoolean(r.Next(-1, 1)) });
}
}

You need to set the initial colour via a Setter and not in XAML. For more information and see this question: Change the color of ellipse when mouse over

there are a few issues in your XAML
set the size of your Ellipse
you need to use Style instead of Ellipse.Triggers
set your Fill color in your Style if you wane be able to change it in XAML by some condition
here an working example for your problem
<DataTemplate>
<!--<DockPanel> juste because i like StackPanel-->
<StackPanel Orientation="Horizontal">
<!--<Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">-->
<Ellipse Name="ellipse" Width="15" Height="15">
<!--<Ellipse.Triggers>-->
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Red"/>
<Style.Triggers>
<!--<Trigger Property="{Binding Online}" Value="True">-->
<DataTrigger Binding="{Binding Online}" Value="True">
<Setter Property="Fill" Value="LimeGreen"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<TextBlock Text="{Binding text}"/>
</StackPanel>
</DataTemplate>

How do I remove the X axis labels from this chart?

Keeping myself concise and to the point I wish to remove the labels or at the very least modify them from my X-Axis :
I seem to be using a modified version of this library that allows me to use some tools usually won't work in wp7.
xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
This is the LineSeries definitions as of right now :
<charting:Chart x:Name="chart" Title="Humidity Readings" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Foreground="#FF3C58C8">
<chartingToolkit:LineSeries x:Name="HumidityGraph" Title="Humidity" BorderThickness="2" ItemsSource="{Binding Data}" IndependentValuePath="Time" DependentValuePath="Measurement"/>
</charting:Chart>
In response to chridam I tried implementing his suggestion - No succes.
<charting:Chart x:Name="chart" Title="Humidity Readings" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Foreground="#FF3C58C8">
<charting:Chart.LegendStyle>
<Style TargetType="visualizationToolkit:Legend">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</charting:Chart.LegendStyle>
<!--there doesn't seem to be an AxisLabelStyle that I can create a style in.-->
<Style x:Key="EmptyStyle" TargetType="charting:NumericAxisLabel">
<Setter Property="StringFormat" Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:NumericAxisLabel">
<TextBlock />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<chartingToolkit:LineSeries x:Name="HumidityGraph" Title="Humidity" BorderThickness="2" ItemsSource="{Binding Data}" IndependentValuePath="Time" DependentValuePath="Measurement" TransitionDuration="0:1:1.5" FontSize="18.667">
<charting:LinearAxis AxisLabelStyle="{StaticResource EmptyStyle}" Orientation="X" ShowGridLines="True"/>
</chartingToolkit:LineSeries>
</charting:Chart>

Try specifying a style for Axis Label that sets the StringFormat property value to empty
<chartingToolkit:CategoryAxis>
<chartingToolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="AxisLabel">
<Setter Property="StringFormat" Value=""></Setter>
</Style>
</chartingToolkit:CategoryAxis.AxisLabelStyle>
</chartingToolkit:CategoryAxis>
Update:
Another alternative is to apply the style template
<Style x:Key="EmptyStyle" TargetType="charting:NumericAxisLabel">
<Setter Property="StringFormat" Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:NumericAxisLabel">
<TextBlock />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
to this:
<charting:LineSeries.DependentRangeAxis>
<charting:LinearAxis AxisLabelStyle="{StaticResource EmptyStyle}"
Orientation="X"
ShowGridLines="True"/>
</charting:LineSeries.DependentRangeAxis>
For more resources on styling the chart, Styling a Silverlight Chart

Creating Layered Custom Control Templates (WPF 4 / .net 4.0 / C#)

I need some help in trying to recreate the following style:
The sea of red can be ignored because it's just the background the textbox is sitting on.
To create the textbox I use the following xaml:
<TextBox Name="tbSorageName"
Grid.Column="1"
Width="250"
Height="30"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsReadOnly="True"
Style="{StaticResource MainTextBoxStyle}"
Text="{Binding SelectedStorage.Name,
Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}" />
To style it, I used the following style:
<Style x:Key="MainTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="Snow" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Background" Value="{DynamicResource MainTextBox_BGBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource MainTextBox_BorderBrush}" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
The Brushes I use are:
<SolidColorBrush x:Key="MainTextBox_BGBrush" Color="#3A3A3A" />
<SolidColorBrush x:Key="MainTextBox_BorderBrush" Color="#656565" />
That creates the basic textbox I use in my application, but I want to take my design much further by floating some meaningful text that describes the contents of textbox on the right hand side of the text box - So it should be anchored to the right hand side.

You can do this easily via 2 approaches.
1.Create a user control that consists of a textbox and a textblock. The Xaml for the UserControl would look similar to the following
<Grid Width="{Binding Path=Width, ElementName=tbSorageName}" Height="{Binding Path=Height, ElementName=tbSorageName}">
<TextBox Name="tbSorageName"
Grid.Column="1"
Width="250"
Height="30"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsReadOnly="True"
Style="{StaticResource MainTextBoxStyle}"
Text="hello" />
<TextBlock HorizontalAlignment="Right" Margin="5" Foreground="Red" FontStyle="Italic">Name</TextBlock>
</Grid>
2.Overlay an Adorner on the textbox and draw the description over the Textbox yourself via an OnRender Override.
I would go with the Usercontrol approach since that is cleaner and easier to maintain.