Is there a workaround for the missing x:Shared MarkupExtension in silverlight?
I have the following Xaml which is creating an ellipse on each target series. I need the ellipses to be unique as they are later added to canvas. By using this Xaml I get the error that the UIElement has already been added to another parent (e.g. single Ellipse instance added to Canvas multiple times).
In WPF I simply use the x:Shared property on this style to get it to work.
<!-- Set the style for the series -->
<Style TargetType="SciChart:FastLineRenderableSeries" >
<Setter Property="SeriesColor" Value="#FF93F2C1"/>
<Setter Property="ResamplingMode" Value="Mid"/>
<Setter Property="RolloverMarker">
<Setter.Value>
<Ellipse Width="9" Height="9" Fill="#7793F2C1" Stroke="#FFA3FFC9"/>
</Setter.Value>
</Setter>
</Style>
A workaround I considered was to create a control called RolloverMarker and set its control template. I'd appreciate any direct or indirect solutions to this problem.
If you are dynamically adding objects to a panel, then a new object needs to be created each time, or you need to define your control in some kind of Template and add a new data object which will use the Template. You cannot add the same item multiple times.
For example,
// Does not work
var templateItem = new FastLineRenderableSeries();
myCanvas.Add(templateItem);
myCanvas.Add(templateItem);
// Works
myCanvas.Add(new FastLineRenderableSeries());
myCanvas.Add(new FastLineRenderableSeries());
Or
<ItemsControl ItemsSource="{Binding SomeCollection}"
ItemTemplate="{StaticResource FastLineRenderableSeriesStyle}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
// Add items. They'll get rendered with defined ItemStyle.
var templateItem = new FastLineRenderableSeries();
SomeCollection.Add(templateItem);
SomeCollection.Add(templateItem);
Related
I have an Expander style which applied template on both Header and Content
I wish to have one of the TextBlock inside content's template to match the Header's TextBlock's Foreground color
<Style TargetType="Expander">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Foreground="Blue"/> <!--Header TextBlock-->
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock/> <!--Match Header TextBlock's Foreground-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I have tried ElemenName binding but it seems like the name scope is different since I am 2 template level deep.
I thought about TemplateBinding but I only want one of the column in the content to match the color of header instead of the whole expander.
I could apply the same trigger for the Header TextBlock on the Content TextBlock too but I am trying to see if there is a way to avoid duplicating the code.
ElementName can't work across templates; with a template, you could have multiple elements with the same name.
Anything with different template instances reaching out to grope each other via the visual tree is going to be fraught with nameless horrors, whatever you do.
Instead, I would suggest that they both get their brushes from the same source. This is much more in line with how WPF is happy doing things.
If the color won't change, use an appropriately-named Brush resource for both.
If it will change, bind both to a viewmodel Brush property (kinda squicky, but not the end of the world), or use triggers driven by some other viewmodel property which represents the state being indicated by the color. The triggers would reference any number of appropriately-named Brush resources: ErrorBrush, HappyBrush, SadBrush, etc. By "name" I mean x:Key of course:
<SolidColorBrush x:Key="HappyBrush">GreenYellow</SolidColorBrush>
...etc.
Sorry that the title is a bit vague but I could'n come up with a better one.
For arguments sake let's say I'm developing a simple drawing application, where the user just clicks and drags to draw a line (I'm not really developing that, but just to keep it simple).
I have a custom shape for the line to draw. Now I want to add new lines to the view as needed, but I'd like to use an ObservableCollection property via data binding on the view model to do that. Usaully I would use an ItemsControl. But of course the ItemsControl automatically positions it's items, which is not what I want.
Does anyone have an idea how to do that? Is there a way to disable the layout functions of an ItemsControl?
You can change the ItemsPanelTemplate of an ItemsControl so it uses a Canvas instead of a StackPanel to hold its items, then use the ItemContainerStyle to bind the Canvas.Top and Canvas.Left properties to your data object to position them.
<ItemsControl ItemsSource="{Binding MyCollection}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Y}" />
<Setter Property="Canvas.Left" Value="{Binding X}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
I have a blog article about the ItemsControl that explains in more detail how an ItemsControl works if you're interested.
I actually have two questions:
How do I modify a custom control that inherits from a FrameworkElement that only holds one child (e.g. Page or ContentControl) so that it holds multiple children (like a Panel)? Can this be done from the class definition?
How do I bind the children of a custom control to a Panel object (e.g WrapPanel) defined in the template of the custom control?
I'm not even sure if it is possible, but I want to create a custom control that behaves like a Page, or may even inherit from Page, but allows me to enter in children in XAML. For example, I would like the XAML for generating my custom control to look like this:
<CustomPage CustomAttribute="blah">
<TextBox/>
<TextBlock Text="hehe"/>
<Label Content="ha!"/>
</CustomPage>
I want to define in the style that a WrapPanel displays the children. Something like this:
<Style TargetType="{x:Type CustomPage}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CustomPage}">
<WrapPanel/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
I would replace the WrapPanel with a ContentPresenter except that I want the ContentPresenter to behave like a WrapPanel.
I hope this is specific enough.
You can actually do exactly what you want already with an ItemsControl.
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<TextBox/>
<TextBlock Text="hehe"/>
<Label Content="ha!"/>
</ItemsControl.Items>
</ItemsControl>
Hope that helps
EDIT: You can use the above ItemsControl as the root element in a page to gain the page's functionality.
Thank you, Murkaeus. You got me going in the right direction.
In the end, I created a custom control that inherited from Page, defining a ContentProperty for it. This apparently overrides the ContentProperty of the base class. And this works for any control type, too. Here is my code:
[ContentProperty("Children")]
class CustomPage : System.Windows.Controls.Page
{
ObservableCollection<UIElement> children = new ObservableCollection<UIElement>();
public ObservableCollection<UIElement> Children { get { return children; } set { children = value; } }
}
Then I defined the template for my control in the Themes/Generic.xaml file with an ItemsControl using my custom ContentProperty as a source:
<Style TargetType="local:CustomPage">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ItemsControl ItemsSource="{Binding Children,
RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I hope this helps anyone else who is looking for a solution to the same problem. And thank you again, Murkaeus, for your help!
EDIT: I should warn everyone that if you use this method, all your data bindings are lost for some reason, I discovered this with further experimentation. I ended up giving up and just specifying a panel as the child of my custom page object.
I want to utilise a generic style for my ComboBoxItem content and have the text content bound to different properties on my underlying class. So this is the best I can come up with but the bindings are hard coded. So for every class bound to a combobox using this ItemContainerStyle I'd have to implement a "MainText" and "SubText" property.
Question is, is there a way to have the binding soft coded so where the style referenced from a combobox I can specify which string properties of the underlying class are used.
<Style TargetType="{x:Type ComboBoxItem}" x:Key="ComboBoxItemStyleA1">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="BB" Padding="8,3,8,3" Background="DarkGreen">
<StackPanel Margin="0">
<TextBlock Foreground="White" FontSize="16" Text="{Binding MainText}"/>
<TextBlock Foreground="White" FontSize="8" Text="{Binding SubText}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="BB" Value="#FF256294"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And to use the style...
<ComboBox ItemsSource="{Binding Items}"
ItemContainerStyle="{StaticResource ComboBoxItemStyleA1}" />
Further to dowhilefor's answer (many many thanks - WPF is great but sure is a voyage of discovery)
I used a data template to define the cell look originally - and then wanted to use a comboboxitem based style with a control template defined where I could specify the onmouseover triggers. i.e. these were to change the background color etc.
Butj
a) I couldn't remove the Border section of the template above - the triggers are tied to it by targettype="BB". so I kind of wanted to get the trigger bound to the container such that the datatemplate would pick up the background from the template binding but not sure how to get this plumbed in.
b) I realised that even if I comment out the BB specific bindings on the triggers just to get it to run - the combobox doesn't find and use the DataTemplate I defined. Seems that defining the controltemplate in my comboboxitemstyle stops it picking up the datatemplate.
I hope I make sense here - bottom line is I just want a style that I can apply with triggers in that set the background color of my cobobox item. It should not know what the data is - i.e. be able to plug in a datatemplate that will (template ?) bind to this background color.
Many thanks for the very fast response.
btw I'm using ItemContainerStyle in conjuction with ItemTemplate so I can have a different representation in the dropdown to what appears in the combobox list
First of all don't use the ItemContainerStyle for that. To be more precise never have any Bindings to the datacontext inside an ItemContainerStyle, at least try not. Why? The Style is used for defining the appearance of a combobox item disregarding the content. If you want to define how the content should look like, you use a DataTemplate for that. There are multiple ways to tell the combobox where he can find a proper DataTemplate for the Data you supply. Checkout the property ItemTemplate, ItemTemplateSelector and search for implicit styles, to find out more about them.
So to your problem, create one ItemContainerStyle for you combobox (if you really have to anymore) which doesn't care about the object that will be put into. Now you still need to provide multiple DataTemplates each and everyone with the knowledge of the data object that you want to be templated. There is no way around it, there is no soft databinding. Just try to keep your templates small and simple. If for some reason you need the exact same template, but your properties are just named differently, why not use a wrapper item for the DataContext with the properties Caption, Description and you can decide in code how these properties are filled with your real data wrapped into this object.
I have this case
<WrapPanel>
<CheckBox>Really long name</CheckBox>
<CheckBox>Short</CheckBox>
<CheckBox>Longer again</CheckBox>
<CheckBox>Foo</CheckBox>
<Slider MinWidth="200" />
</WrapPanel>
I want all the CheckBoxes inside the WrapPanel to be the same width.
Adding the following almost accomplishes the desired effect
<WrapPanel.Resources>
<Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
<Setter Property="MinWidth" Value="75" />
</Style>
</WrapPanel.Resources>
However, I do not want to hardcode a specific width, rather let the largest CheckBox set the width (the above also fails if any width > 75).
The Slider is independent and should be allowed to be larger than the CheckBoxes.
I do not want to use a Grid (with IsSharedSizeScope) since I do not want a hardcoded number of columns.
This article presents an interesting solution, but it would be nice to solve the problem without creating a custom control or using C# code.
What is the best way to do this, preferrably in XAML only?
I originally looked at this using IsSharedSizeGroup but hit a roadblock with making it dynamically apply to things instead of explicitly wrapping items. In this case, creating an AttachedProperty in code or another code based solution may in the long run be better then a XAML only approach. However, to create a purely XAML solution we can make use of the SharedSizeGroup property on a ColumnDefinition to share the sizes of each element and then use set the IsSharedSizeScope property on the WrapPanel. Doing so will make all of the contents in the WrapPanel with the same SharedSizeGroup share their width for columns and height for rows. To wrap the ComboBoxes and possibly ComboBoxes that are not currently in the XAML but will be added to the WrapPanel, we can create a Style and re-template the ComboBox to bassicly wrap it with a Grid.
<WrapPanel Grid.IsSharedSizeScope="True">
<WrapPanel.Resources>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="WrapPannelGroup" />
</Grid.ColumnDefinitions>
<CheckBox Style="{x:Null}"
IsChecked="{TemplateBinding IsChecked}">
<!--Other TemplateBindings-->
<CheckBox.Content>
<ContentPresenter />
</CheckBox.Content>
</CheckBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</WrapPanel.Resources>
<CheckBox>Really long name</CheckBox>
<CheckBox>Short</CheckBox>
<CheckBox IsChecked="True">Longer again</CheckBox>
<CheckBox>Foo</CheckBox>
<Slider MinWidth="200" />
</WrapPanel>
Here we are re-templating all CheckBoxes without a style inside the WrapPannel to instead be CheckBoxes surrounded by a Grid. However, because of this we need to re-bind all of the CheckBoxes properties that we want to maintain. While that could become burdensome, it also allows for a pure XAML approach.
You can add a property or a converter that does the needed work, then bind each column's width to it. The property or converter can access the entire list of items, finding the widest one, and returning the desired width for all elements.
The best way to do this is to use a CustomControl like the article you posted.
Any solution you come across is going to have to iterate through the list of items and find the maximum width during the measure phase.
Any sort of XAML-only answer would have to be provided OOTB (e.g. IsSharedSizeScope), or would leverage some sort of multi-binding to link the items together. Thus any sort of XAML answer would be full of markup which makes it more verbose (and less elegant).
The only modification that I see to the CodeProject article you posted is adding the ability to "turn-off" consideration of certain elements (like your slider). This could be done as an additional attached property.