This is hopefully going to be a really simple answer, I'm just not seeing the proverbial wood for the trees I think.
I've got a DataGridCell style in which I want to bind the content of the cell to the source property of an image, here's the XAML I'm using at the moment:
<Style x:Key="DataGridImageCellStyle" TargetType="{x:Type toolkit:DataGridCell}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type toolkit:DataGridCell}">
<Border Background="Transparent"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
SnapsToDevicePixels="True">
<Image Source="{Binding RelativeSource={RelativeSource AncestorType=toolkit:DataGridCell}, Path=Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Note that at the moment i'm binding the Image Source to Content.. which doesnt work, i've also tried Value, which didn't work!
So my question is, nice and simply.. what is the correct binding to use to get the cell's content into the source property of this image?
Thanks in advance!
Pete
If the column is a DataGridTextColumn then you might be able to bind to the Text property of the TextBlock that is its content:
<Image Source="{Binding RelativeSource=
{RelativeSource AncestorType=DataGridCell}, Path=Content.Text}" />
That's really a hack, though. If you want to display an image in a column, you should probably use a DataGridTemplateColumn:
<DataGridTemplateColumn Header="...">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding SomeProperty}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Where SomeProperty is the property of your row object that has the image path.
Related
I have here a ListBox which shall show serveral items where some of them are selected.
<ListBox IsEnabled="False" x:Name="SecondaryModelSelector" SelectionMode="Extended" SelectedItem="{Binding Path=DataContext.SelectedSecondaryModels, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentControl}, Mode=OneWay}" ItemsSource="{Binding Path=DataContext.AvailableModels, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentControl}}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Name}" Margin="5,0,5,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The selected items are set in a ComboBox and thus the ListBox is disabled and Mode=OneWay to disable selection in the ListBox itself.
The Template looks like this:
<Style x:Key="MyListBoxItem" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border" Padding="2">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyListBoxBorder" TargetType="{x:Type ListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MyListBoxItem}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="OuterBorder">
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is now, that I cannot display multiple selected items, i.e. the background does not turn blue. Showing only one selected item is no problem.
Works (but shows only one selected item...)
public Cpu SelectedSecondaryModels
{
get { return SelectedGlobalVariable.SecondaryModels.FirstOrDefault(); }
}
Does not work:
public ObservableCollection<Model> SelectedSecondaryModels
{
get { return new ObservableCollection<Model>(SelectedGlobalVariable.SecondaryModels); }
}
I have no errors, so how can I show multiple selected items?
I tried SelectedItems instead of SelectedItem instead, but this is read-only field.
When I allow to select items in the ListBox than the blue background appears, and binding throws errors as there is no setter method.
The SelectedItem property cannot be bound to a collection of several items to be selected.
And as you have already noticed, SelectedItems is a read-only property.
You could use an attached behaviour to work around this. Please refer to this blog post and this example for more information about how to do this.
You will also find some solutions here:
Bind to SelectedItems from DataGrid or ListBox in MVVM
So im trying to make button appear on right click in my ListBox.
<ListBox Grid.Column="1" Margin="358,44,20,63" Name="scriptbox" Background="#FF282828" Foreground="White" SelectionChanged="Scriptbox_SelectionChanged" BorderThickness="0">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem
Template="{DynamicResource MenuItemTemplate}"
Header="Delete"
Click="MenuItemDelete_Click" >
</MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
This is my MenuItem template.
<ControlTemplate TargetType="{x:Type MenuItem}" x:Key="MenuItemTemplate">
<Border x:Name="Border" Background="#FF282828" Padding="30,5,30,5" BorderThickness="0" Margin="0">
<ContentPresenter ContentSource="Header" x:Name="HeaderHost" RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border" Value="#51544e"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ItemsPanelTemplate x:Key="MenuItemPanelTemplate">
<StackPanel Margin="-3,0,0,0" Background="White"/>
</ItemsPanelTemplate>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/>
</Style>
Everything is fine but there is white border all around the button.
What you recognize as a white border is the ContextMenu itself that contains your MenuItems. Try adding more buttons and changing the Background and BorderBrush of the ContextMenu and you will see.
<ContextMenu Background="Red" BorderBrush="Blue">
Changing the brushes like this will lead to this result, which makes it obvious.
If you create a custom control template for your MenuItems you should probably do so for the ContextMenu, too, if only setting brushes does not fit your requirements. As you can see in the example, there is still a vertical white line that is part of the default control template, that you might want to get rid of. You can start from this example, although it is neither the default template nor complete. Look at this related post for guidance on how to extract the default control template for ContextMenu if you need it.
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>
I Have a ListBox with an ItemTemplate defined as follows. My problem is the image is shown in only one item per type. i.e:
How do I make all the items show their relevant status?
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl x:Name="status">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="NotDownloaded">
<Setter Property="Content">
<Setter.Value>
<Image Source="/Images/help-file24.png"/>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Downloaded">
<Setter Property="Content">
<Setter.Value>
<Image Source="/Images/file-complete24.png""/>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Error">
<Setter Property="Content">
<Setter.Value>
<Image Source="/Images/file-warning24.png"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<TextBlock Text="{Binding Url}" Margin="5,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
i found this on stackoverflow
If you will use the image in multiple places, then it's worth loading
the image data only once into memory and then sharing it between all
Image elements.
To do this, create a BitmapSource as a resource somewhere:
<BitmapImage x:Key="MyImageSource" UriSource="../Media/Image.png" />
Then, in your code, use something like:
<Image Source="{StaticResource MyImageSource}" />
In my case, I found
that I had to set the Image.png file to have a build action of
Resource rather than just Content. This causes the image to be carried
within your compiled assembly.
Image is an UIElement, meaning it's part of the hierarchy of controls and can only have one parent at any given time.
What your template is doing is set the same Image control instance as the content of many ContentControl. So it only works for the very first ContentControl, and then fails as Image has already a parent.
You may try to replace your ContentControl with an Image and setting Image's source in your DataTriggers.
Well, actually rotated -90 degrees from horizontal is what I mean.
I need to do this because the text for the header is quite long but the cell value is short, and I want to fit a lot of columns on the screen.
Is it possible to do this easily or do I need to learn about resources and templates first? I don't mind a "hack" solution!
This will rotate the whole ColumnHeaderCell:
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
Be aware: this means HorizontalContentAlignment is then a VerticalContentAlignment and vice versa.
Here is another way to do it:
<Style x:Key="soDataGrid_ColumnHeaderRotateStyle" TargetType="DataGridColumnHeader" >
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"
FontWeight="Bold" Width="60"
VerticalAlignment="Center" TextAlignment="Center"
HorizontalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" />
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
You can use the style as follows
<DataGridComboBoxColumn Header="Portrait /
Landscape" Width="42"
HeaderStyle="{StaticResource soDataGrid_ColumnHeaderRotateStyle}"
SelectedItemBinding="{Binding Orientation}"
ItemsSource="{Binding Mode=OneWay,
Source={StaticResource languageEnum}}" />
I find this approach gives you a lot of control. It is helpful to use the line break code in long header text.
Unfortunately I have found you need to hardcode the width of the rotated textblock - maybe there is a better way to set this width based on the text content.