I'm new in WPF and I have problems encountered. Why the binding of ListView ItemSource inside the sectionControls:ViewDefaultLayout element is not working. But when I try to remove the ListView element outside of the sectionControls:ViewDefaultLayout element the categories are showing.
CategoriesControl.xaml
<UserControl x:Class="POS.Wpf.Controls.CategoriesControl"
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:POS.Wpf.Controls"
xmlns:sectionControls="clr-namespace:POS.Wpf.Controls.Section"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Loaded="UserControl_Loaded"
x:Name="categoryUserControl">
<Grid>
<sectionControls:ViewDefaultLayout Title="Categories" Add="ViewDefaultLayout_Add" Delete="ViewDefaultLayout_Delete">
<ListView ItemsSource="{Binding DataContext.Categories}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
</GridView>
</ListView.View>
</ListView>
</sectionControls:ViewDefaultLayout>
</Grid>
ViewDefaultLayout.xaml
<UserControl x:Class="POS.Wpf.Controls.Section.ViewDefaultLayout"
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:POS.Wpf.Controls.Section"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<DockPanel>
<Grid DockPanel.Dock="Top">
<Label Content="{Binding Title}" Margin="10" Style="{StaticResource BoldLargeLabel}"></Label>
</Grid>
<Border Padding="10">
<DockPanel>
<Border BorderBrush="{x:Null}" DockPanel.Dock="Top" Margin="0 0 0 5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="135" />
</Grid.ColumnDefinitions>
<Grid>
<TextBox Text="Search" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Foreground="#FFE4DFDF" VerticalContentAlignment="Center" FontSize="15"></TextBox>
<Button x:Name="SearchButton" Padding="5" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Right" Click="SearchButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Search" Width="30" Height="30" />
</Button>
</Grid>
<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="AddButton" Padding="5" Background="{x:Null}" HorizontalAlignment="Right" Margin="0 0 5 0" Click="AddButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Add" Width="50" Height="30" />
</Button>
<Button x:Name="DeleteButton" Padding="5" Background="{x:Null}" HorizontalAlignment="Right" Click="DeleteButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Delete" Width="50" Height="30" />
</Button>
</StackPanel>
</Grid>
</Border>
<ContentPresenter />
</DockPanel>
</Border>
</DockPanel>
</ControlTemplate>
</UserControl.Template>
Related
Hello friend i have created wpf theme in which i place buttons so my questions is when i click the particular button the complete application color should change below is my code behind and xaml.
<UserControl x:Class="Alyex.Exchange.UserControls.UCUserThemes"
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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxthm="clr-namespace:DevExpress.Xpf.Utils.Themes;assembly=DevExpress.Xpf.Core.v14.2"
xmlns:common="clr-namespace:Alyex.Common;assembly=Alyex.Common"
xmlns:commonUIHelpers="clr-namespace:Alyex.CommonUI.UIHelpers;assembly=Alyex.CommonUI"
xmlns:commonResource="clr-namespace:Alyex.Common.Resources;assembly=Alyex.Common"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="900" ToolTip="WindowsTransparency">
<UserControl.Resources>
<common:DebugConverter x:Key="debugConverter"/>
<common:LanguagetoHorizontalContentAligmentConverter x:Key="ContentAlignmentConverter"/>
<common:AllowInsertToNewNodeVisibilityConverter x:Key="newNodeVisibilityConverter"/>
<common:BoolToStatusConverter x:Key="boolToStatusConverter"/>
<DataTemplate x:Key="toolbarCustomization">
<dxb:BarManagerActionContainer>
<!--Remove Export Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="export" />
<!--Remove Email Sending Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="email" />
<!--Remove Save Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="save" />
</dxb:BarManagerActionContainer>
</DataTemplate>
<DataTemplate x:Key="PageHeader" >
<DockPanel>
<StackPanel Orientation="Vertical">
<dxe:ImageEdit x:Name="logo" HorizontalAlignment="Left"
Margin="0,0,0,1" BorderThickness="0"
VerticalAlignment="Top" IsPrintingMode="True"
HorizontalContentAlignment="Stretch"
CausesValidation="False"
Source="/Alyex.CommonUI;component/Images/Alx/ReportHeader.jpg"
Stretch="Fill"
Height="40"
Width="238"
/>
<dxe:TextEdit IsPrintingMode="True"
Text="{Binding Source={x:Static sys:DateTime.Now},Mode=OneWay, StringFormat='{}{0:dddd, dd-MMMM-yyyy hh:mm tt}'}"
dxp:ExportSettings.TargetType="Text"
Background="Transparent"
Margin="0,0,0,3"
></dxe:TextEdit>
</StackPanel>
<dxe:TextEdit Grid.Column="1" Grid.RowSpan="2"
EditValue="{Binding Content,Mode=OneWay}"
dxp:ExportSettings.TargetType="Text"
FontSize="25" FontWeight="ExtraBold"
Margin="10,0,0,1"
Background="Transparent"
HorizontalAlignment="Center"
MaxWidth="{Binding Path=UsablePageWidth, Mode=OneWay}"
/>
</DockPanel>
</DataTemplate>
<DataTemplate x:Key="PageFooter">
<dxe:TextEdit
HorizontalContentAlignment="Center"
Width="{Binding Path=UsablePageWidth, Mode=OneWay}"
dxp:ExportSettings.TargetType="PageNumber"
dxp:PageNumberExportSettings.Kind="NumberOfTotal"
dxp:PageNumberExportSettings.Format="Page {0} of {1}" />
</DataTemplate>
<DataTemplate x:Key="StatusIndicator">
<StackPanel Orientation="Horizontal">
<dxga:StateIndicatorControl x:Name="lampRecordStatusIndicator" StateIndex="{Binding Path=RowData.Row.IsActiveRecord}" Width="20" Height="20">
<dxga:StateIndicatorControl.Model>
<dxga:LampStateIndicatorModel />
</dxga:StateIndicatorControl.Model>
</dxga:StateIndicatorControl>
<TextBlock x:Name="txtBlkRecordStatus" VerticalAlignment="Center" Text="{Binding Path=RowData.Row.IsActiveRecord, Converter={StaticResource boolToStatusConverter}, Mode=OneWay}"></TextBlock>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="grdContainer" Margin="3,3,3,3">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<dxb:BarManager Name="barManager" CreateStandardLayout="True">
<dxd:DockLayoutManager x:Name="dockLayotManager" AllowDocumentSelector="False" Background="Transparent">
<dxd:LayoutGroup x:Name="layotGrp">
<dxd:DocumentGroup x:Name="docmntGrpUserThemes" ClosePageButtonShowMode="InAllTabPageHeaders"
ShowDropDownButton="False" CaptionLocation="Bottom" AllowFloat="False" AllowDrag="False">
<dxd:DocumentPanel x:Name="docmntPnlUserThemes" Caption="UserThemes"
AllowClose="False" AllowFloat="False" ToolTip="UserThemes"
AllowDrag="False">
<DockPanel>
<dxe:ListBoxEdit Name="lstboxwindowsTransparancy" Margin="10" SelectedIndexChanged="lstboxWindowsTransparency_SelectedIndexChanged"
ItemsSource="{Binding Source={x:Static dx:Theme.Themes},Mode=OneWay}">
<dxe:ListBoxEdit.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Height="{Binding (FrameworkElement.ActualHeight), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" Orientation="Vertical" />
</ItemsPanelTemplate>
</dxe:ListBoxEdit.ItemsPanel>
<dxe:ListBoxEdit.ItemTemplate>
<DataTemplate>
<Button Width="130" Height="100">
<Button.Content>
<StackPanel>
<Image Source="{Binding SmallGlyph}" Width="40"/>
<AccessText TextWrapping="Wrap" Text="{Binding}" HorizontalAlignment="Center"></AccessText>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</dxe:ListBoxEdit.ItemTemplate>
</dxe:ListBoxEdit>
</DockPanel>
</dxd:DocumentPanel>
</dxd:DocumentGroup>
</dxd:LayoutGroup>
</dxd:DockLayoutManager>
</dxb:BarManager>
</Grid>
and this is my code behind
public partial class UCUserThemes : UserControl
{
public UCUserThemes()
{
InitializeComponent();
}
private void lstboxWindowsTransparency_SelectedIndexChanged(object sender, RoutedEventArgs e)
{
DXSplashScreen.Show<WaitDialogSSView>();
DevExpress.Xpf.Core.ThemeManager.ApplicationThemeName = DevExpress.Xpf.Core.Theme.Default.ToString();
ImageSource img = new BitmapImage(((DevExpress.Xpf.Core.Theme)lstboxwindowsTransparancy.SelectedItem).SmallGlyph);
ThemeManager.ApplicationThemeName = Theme.Office2010BlackFullName;
DXSplashScreen.Close();
}
}
}
ThemeManager.ApplicationThemeName= "Your Theme";
I have an issue with a text. In some custom usercontrols it is flickering every more/less second (probably when rendering) here is a gif:
I'm using these render and text options for now which are applied on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="HighQuality"
I was using these before:
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="Linear"
TextOptions.TextRenderingMode="Grayscale"
TextOptions.TextFormattingMode="Display"
and it was ok but the text was too sharp.
XAML of this specific component:
<UserControl x:Class="FunctionButton" x:Name="PART_Base"
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:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:SkyPCTool"
xmlns:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
mc:Ignorable="d"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
MinHeight="52" d:DesignWidth="300" Margin="0">
<UserControl.DataContext>
<ViewModels:FunctionButtonViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<ViewModels:TextToVisibilityConverter x:Key="textConverter" />
</UserControl.Resources>
<Border CornerRadius="2" Background="{StaticResource MaterialDesignPaper}">
<Grid Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="12,6" Content="{Binding ButtonCaption}" />
<Grid Grid.Column="1" Margin="6,0">
<Image Source="{Binding Icon}" ToolTip="{Binding IconTag}" />
</Grid>
<Grid Grid.Column="2" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Title}" RenderOptions.ClearTypeHint="Enabled" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="14" />
<TextBlock Grid.Row="1" Text="{Binding Description}" RenderOptions.ClearTypeHint="Enabled" Margin="12,0,0,0" Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource textConverter}}" FontWeight="Normal" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="12.667" />
</Grid>
</Grid>
</Border>
I did it. I downloaded the Roboto font from Google website, then I set these options on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType"
This is my UserControl file:
<UserControl x:Class="myProject.ButtonWithImage"
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:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedButton, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedButton, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
And in a page I set up a button like this:
<myProject:ButtonWithImage ImageSource="/Resources/test.png" Text="Back" Name="btnBack1" Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/Categories.xaml" />
However the text and the imagesource aren't on the button! They don't appear. What am I doing wrong?
Created Button Usercontrol
<Button x:Class="WpfApplication5.UserControl1"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
FocusVisualStyle="{x:Null}" Content="ok" Foreground="White" Height="30" Width="90" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
c# code
public partial class UserControl1 : Button
{
public UserControl1()
{
InitializeComponent();
}
}
xaml window
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myProject="clr-namespace:WpfApplication5"
Title="MainWindow" Height="350" Width="525">
<myProject:UserControl1 Content="Button Text" Tag="btn2.png" />
You have named your UserControl ImageControl, but then you have tried to access it in your XAML using the name ImageButton. You'll have more luck if you stick with the one name. Try this instead:
<UserControl x:Class="myProject.ButtonWithImage"
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:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedControl, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedControl, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
This also assumes that you have correctly declared two DependencyPropertys of the correct type, named ImagesSource and Text in your UserControl and have set appropriate values for them.
I define my own control - NameInfoControl, which are based on UserControl thorough XAML:
<UserControl x:Class="AcadLoadManager.NameInfoControl"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ToolBar>
<Button x:Name="btnAdd" x:FieldModifier="public" ToolTip="Add record" >
<Image Source="/AcadLoadManager;component/Icons/bullet_sparkle.png" Width="16"/>
</Button>
<Button x:Name="btnEdit" x:FieldModifier="public" ToolTip="Edit record">
<Image Source="/AcadLoadManager;component/Icons/bullet_edit.png" Width="16"/>
</Button>
<Button x:Name="btnRemove" x:FieldModifier="public" ToolTip="Remove record">
<Image Source="/AcadLoadManager;component/Icons/bullet_cross.png" Width="16"/>
</Button>
</ToolBar>
<ListView x:Name="myListView" x:FieldModifier="public" Margin="3" Grid.Row="1">
<ListView.View>
<GridView>
<GridViewColumn Width="100" Header="Global name"
DisplayMemberBinding="{Binding GlobalName}"/>
<GridViewColumn Width="100" Header="Local name"
DisplayMemberBinding="{Binding LocalName}"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
</UserControl>
It looks so:
My control has ListView item, named as myListView. How can I set value for ItemsSource property of myListView through XAML for NameInfoControl instance? I need it in the next code:
<GroupBox Header="Command groups:" Grid.Column="0" Grid.Row="1" Margin="5">
<local:NameInfoControl/>
</GroupBox>
In your XAML of your NameInfoControl bind the items of your myListView to the DataContext of your control:
<ListView ItemsSource="{Binding}" x:Name="myListView" x:FieldModifier="public" Margin="3" Grid.Row="1">
And then in the parent XAML where you use that control bind the DataContext to the list that contain the items that should be displayed:
<local:NameInfoControl DataContext="{Binding MyCollectionOfItems}" />
<Window x:Class="DataBinding_01.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<TextBox Height="23" Name="textBox1" Width="Auto" />
<TextBox Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</StackPanel>
</Window>
I want the Button fill all available space on the StackPanel. How can I do it?
If you mean fill all horizontal and vertical space you should use a DockPanel.
<DockPanel Height="Auto" Name="stackPanel1" Width="Auto" LastChildFill="True">
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox1" Width="Auto" />
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DockPanel>