Binding View Model property in Style in user Control in WPF - wpf

I have an exceed data grid and I want to bind context menu property of column header.
Here is my code
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid" x:Class="Sedan.Ux.Sheets.Views.SheetView"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
<Style TargetType="{x:Type xcdg:ColumnManagerCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcdg:ColumnManagerCell}">
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{TemplateBinding Content}" HorizontalAlignment="Stretch"/>
<TextBlock Grid.Column="1" Text=" ▼" HorizontalAlignment="Stretch" >
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu DataContext="{Binding Menus}" ItemsSource="{Binding Menus}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="ItemsSource" Value="{Binding SubMenus}"/>
<Setter Property="Command" Value="{Binding Command}"/>
<Setter Property="CommandParameter" Value="{Binding Name}"></Setter>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<xcdg:DataGridControl Grid.Row="0" x:Name="Sheet" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="3" AutoCreateColumns="True" ReadOnly="{Binding ReadOnly}" ItemsSource="{Binding Data}" SelectionMode="Single" SelectedItem="{Binding SelectedItem}">
</xcdg:DataGridControl>
</Grid>
</UserControl>
I am not able to bind Menus property when I am using Setter in style.
If I remove the binding and hard code menu items ,I am able to see the context menu.
I have done research on how to get it done and I found various suggestions on stackoverflow and other forums regarding using 'Relative Source Self' in binding but that didnt work for me.
If I bind Menus to context menu of any button in user control (not via style) , then I am able to see menu.
Please help.

Related

How to setup a template for a ListBox with a DataTemplate

So I have the following ListBox defined:
<ListBox Grid.Row="1" Grid.Column="0" x:Name="RawLBControl"
ItemsSource="{Binding ProductionLists.Raw}"
Background="LightGray" BorderThickness="2" BorderBrush="Black">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
There are going to be a number of these, where the only things that changes is the placement (Grid location) and the ItemsSource bindings. Everything else is going to be the same. Question is how do I setup a template so all the ListBoxes use it.
You can define style in application resources and applied it to ListBox later in your code.
<Application x:Class="Q52018469.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="MyListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Using of this style:
...
<Grid>
...
<ListBox Grid.Row="1" Grid.Column="0" x:Name="RawLBControl"
ItemsSource="{Binding ProductionLists.Raw}"
Style="{StaticResource MyListBoxStyle}" />
</Grid>
...

How to display multiple images as thumbnails in xaml

I am trying to create xaml page in silver light application. How to create a page like this, I have created a xaml page, but I can't create like this, my code is...
<UserControl x:Class="XXX.Views.Attachment.AttachmentViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:xxx.Controls"
xmlns:local2="clr-namespace:xxx.Controls"
xmlns:XXX="clr-namespace:xxx.Controls;assembly=XXX.SL"
xmlns:baseconverters="clr-namespace:System.Windows.Converters;assembly=XXX.SL"
mc:Ignorable="d"
d:DesignHeight="800" FontFamily="{StaticResource MainFont}" d:DesignWidth="350">
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="HeaderStyle" TargetType="TextBlock" >
<Setter Property="Margin" Value="5"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="20"/>
</Style>
</Grid.Resources>
<TextBlock Text="attachments" Style="{StaticResource HeaderStyle}"/>
<Rectangle Height="2" VerticalAlignment="Bottom" Fill="{StaticResource ColorDefaultGray}" Margin="0,40,0,5"/>
<ListView Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />
<TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</UserControl>
it shows the name ListView does not exist, please find the attached image.
ListView is not found because it is not part of the version of Silverlight you are using.
You can apply a style to a ListBox control and replacing the item panel template with a WrapPanel from silverlight Toolkit.
Here is a Resource Dictionary with some styles that can be applied to ListBox controls to get he result you displayed in your attached image.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System="clr-namespace:System;assembly=mscorlib">
<!--Wrapping ListBox Styles-->
<Style x:Key="StretchedItemContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<Style x:Key="ListBox_StretchedItemStyle" TargetType="ListBox">
<Setter Property="ItemContainerStyle" Value="{StaticResource StretchedItemContainerStyle}"/>
</Style>
<Style x:Key="ListBox_HorizontalWrapStyle" TargetType="ListBox">
<Setter Property="ItemContainerStyle" Value="{StaticResource StretchedItemContainerStyle}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" Margin="0"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer VerticalScrollBarVisibility="Auto" BorderBrush="{x:Null}" >
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBox_VerticalWrapStyle" TargetType="ListBox">
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate >
<toolkit:WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End Wrapping ListBox Styles-->
</ResourceDictionary>
With the ListBox_HorizontalWrapStyle you just need to apply it to your target ListBox control
<ListBox Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" Style={StaticResource ListBox_HorizontalWrapStyle} >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />
<TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Cannot show image as content of WPF ToggleButton

I'm working at this Point of time with VS 2015 and WPF.
Some weeks ago i had defined in the App.xaml of my project a templated style for the ToggleButton, so that users can see, if the button is checked or not.
Originally the Content of the togglebutton was a TextBlock with a text.
Now i want to replace that textblock by an Image.
Further i defined in the App.xaml some resources for the Images.
Here is the App.xaml:
<Application x:Class="WPFDesignerPrototyp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFDesignerPrototyp"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!-- Style for togglebuttons-->
<Style x:Key="toggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="outer"
BorderBrush="Black"
BorderThickness="1"
Margin="5,5,0,0"
Opacity=".9"
Background="Transparent">
<Border x:Name="inner"
Margin="5"
BorderThickness="0"
Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="container">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--<TextBlock x:Name="display"
Grid.Row="1"
TextAlignment="Center"
Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>-->
<Image x:Name="displayimage"
Grid.Row="1"
HorizontalAlignment="Center"
Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="outer" Property="Background" Value="LightBlue"/>
<Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="imageHorizontalAlignmentLeft" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignLeft/AlignLeft_16x.png"/>
<Image x:Key="imageHorizontalAlignmentCenter" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignStretchHorizontal/AlignStretchHorizontal_16x.png"/>
<Image x:Key="imageHorizontalAlignmentRight" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignRight/AlignRight_16x.png"/>
</Application.Resources>
</Application>
Then - in my WPF window - i implemented the new Content into one of my togglebuttons.
<ToggleButton x:Name="setAlignLeft" Grid.Row="1" Grid.Column="1" Content="{StaticResource imageHorizontalAlignmentLeft}" Style="{StaticResource toggleButtonStyle}" Click="setAlignLeft_Click"/>
But unfortunately nothing happens.
The Content of the button is blank.
So i tried it with another togglebutton, without the style toggleButtonStyle and there it worked.
I think there must be a mistake in my template but i don't know where.
Can anybody help?
Thanks in advance,
Patrick
You will need to bind with Content.Source of the parent as Content is already Image.
<Image x:Name="displayimage"
Grid.Row="1"
HorizontalAlignment="Center"
Source="{Binding Content.Source, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>

How to use WPF ContentControl 's content with DataTemplate

I copied some resource about custom button using Content control. And I changed something to be <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ContentControl},Path=Content}"> For the dataTempalte
<DataTemplate x:Key="PriceDataTemplate" DataType="m:ClickTradeViewModel">
<Button Command="{Binding ExecuteCommand}" Cursor="Hand">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#FF345C8B" />
</Trigger>
<DataTrigger Binding="{Binding IsExecuting}" Value="True">
<Setter Property="Background" Value="DimGray" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<UserControl>
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ContentControl},Path=Content}"></TextBlock>
</ControlTemplate>
</UserControl.Template>
</UserControl>
</Button>
</DataTemplate>
And for the actual Button, it used
<ContentControl x:Name="AskContentControl" Grid.Column="2"
Margin="5,0,0,0"
Content="{Binding QQ.Bid}"
ContentTemplate="{StaticResource PriceDataTemplate}"/>
I expect the Content will use double Bid's tostring method to render the content, but it shows nothing inside (gray color). In the plot the left side shows the price did exists.
Update: I am not sure what's going on, but with some change <TextBlock Text="{Binding QQ.Ask}"></TextBlock> and set
<ContentControl x:Name="AskContentControl" Grid.Column="2"
Margin="5,0,0,0"
Content="{Binding}"
ContentTemplate="{StaticResource PriceDataTemplate}"/> makes it work.
The problem is then I had to explicitly set the PriceDataTemplate several times for different properties.
It does not work because you are using a Binding with RelativeSource finding a ContentControl but UserControl is also a ContentControl, so what it found is actually the UserControl, not the root ContentControl you thought. In this case you can specify some AncestorLevel as 2 (to find the second ContentControl):
<TextBlock Text="{Binding
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=ContentControl, AncestorLevel=2},
Path=Content}"></TextBlock>
However it's not really safe and in this case the implicit DataContext is actually the Content you set for your ContentControl (this DataContext flows down from the DataTemplate through the UserControl's Template). So the Binding can be just simple like this:
<TextBlock Text="{Binding}"></TextBlock>
Note I supposed you keep setting the ContentControl's Content to {Binding QQ.Bid}.
This is a full working solution... I'm late but perhaps it could help others?
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ParametricStudyAnalysis.ScopeSelection.Special"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid" x:Class="ParametricStudyAnalysis.ScopeSelection.Special.UserControlAddSpecialSignal"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<local:UserControlAddSpecialSignalModel></local:UserControlAddSpecialSignalModel>
</UserControl.DataContext>
<UserControl.Resources>
<DataTemplate DataType="{x:Type local:UserControlSpecialSignalTtrModel}">
<local:UserControlSpecialSignalTtr/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Header="Signal type" Grid.Row="0" Padding="5">
<xcdg:DataGridControl Name="DataGrid" SelectionMode="Single" ItemsSource="{Binding SpecialSignalEntries}"
SelectedItem="{Binding SpecialSignalEntrySelected}" Height="200">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Name" Title="Type of special signal" ReadOnly="True"></xcdg:Column>
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</GroupBox>
<GroupBox Header="Parameters" Grid.Row="1" Margin="0,3,0,0" Padding="5">
<ContentControl Name="MyContentControl"
DataContext="{Binding SpecialSignalEntrySelected, Mode=OneWay}"
Content="{Binding SignalProviderSpecial}">
</ContentControl>
</GroupBox>
</Grid>
</UserControl>

WPF DevExpress LookUpEdit Popup Too High

I'm using a DevExpress LookUpEdit component in a WPF UserControl. My problem is that the popup rectangle is always much bigger that the contents of the items in the PopupContentTemplate. I can't seem to find a property that governs this or maybe I'm going about using the controls improperly (?).
Thanks
<UserControl xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
x:Class="FTI_Opp_WPF.Views.UserControls.ViewSelector"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="../../Common/Styles.xaml" />
<ResourceDictionary
Source="../../Common/Strings.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" FontSize="12" Foreground="gray" Margin="0,-2,1,0">View:</Label>
<dxg:LookUpEdit
Grid.Column="1"
dx:ThemeManager.ThemeName="MetropolisLight"
Name="viewLookupEdit"
AutoPopulateColumns="False"
AutoComplete="True"
IncrementalFiltering="True"
ImmediatePopup="True"
IsReadOnly="True"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding SelectedViewName}"
ShowSizeGrip="false"
MinWidth="200">
<dxg:LookUpEdit.PopupContentTemplate>
<ControlTemplate>
<StackPanel Orientation="Vertical" Height="auto">
<ListBox Name="lstMain"
ItemsSource="{Binding Path=GridViews}"
HorizontalAlignment="Stretch"
BorderThickness="1"
MouseUp="OnRowMouseUp">
<ListBox.ItemContainerStyle>
<Style
TargetType="{x:Type ListBoxItem}">
<Setter Property="BorderThickness">
<Setter.Value>1</Setter.Value>
</Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBoxItem}">
<Grid Name="gridView" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Margin="0,-2,0,0"
Visibility="Visible"
Source="..\..\Images\globe.png"
Height="12"
Width="12" />
<TextBlock
Margin="2,3,0,0"
Grid.Column="1"
Name="viewName"
VerticalAlignment="Stretch"
Text="{Binding Path=Name}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="gridView"
Property="Background" Value="{Binding Converter={StaticResource StyleConverter},ConverterParameter=HOVER_BACKGROUND_COLOR}">
</Setter>
<Setter
TargetName="viewName"
Property="Foreground" Value="White">
</Setter>
<Setter
TargetName="viewName"
Property="FontWeight" Value="BOLD">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=IsEnabled}"
Value="False">
<Setter
Property="IsEnabled"
Value="{Binding Path=IsEnabled}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<Button
Name="btnAdvanced"
Margin="10,0,0,0"
Style="{StaticResource Link}"
Content="manage views"
Click="OnManageViewsClick" />
</StackPanel>
</ControlTemplate>
</dxg:LookUpEdit.PopupContentTemplate>
</dxg:LookUpEdit>
</Grid>
</UserControl>
DX don't provide an "auto size to popup content" feature. You need to work with PopupMinHeight / PopupMaxHeight / PopupHeight.
See this link: http://www.devexpress.com/Support/Center/p/Q428449.aspx

Resources