How can I set value of `myListView` through XAML? - wpf

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}" />

Related

WPF - Binding inside usercontrol content

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>

How to fix Binding TextBlock in WPF MVVM?

You see my XAML code at the bottom; when I debug it in the runtime, I see nothing in two TextBlocks of the StackPanel of my window, whereas there is some data in the binding TextBlocks when it is running!
Why can I see nothing in those TextBlocks?
<Grid Name="SchoolGridView"
AutomationProperties.AutomationId="SchoolGridView"
AutomationProperties.Name="School Group" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" Height="Auto" x:Name="List"
HorizontalContentAlignment="Center" ItemsSource="{Binding
PeopleList}" SelectionMode="Single">
...
</ListView>
<StackPanel Background="LightGray" Height="60"
Orientation="Horizontal" VerticalAlignment="Bottom" Grid.Row="1"
Visibility="{Binding
IsDetailVisible,UpdateSourceTrigger=PropertyChanged}">
<StackPanel HorizontalAlignment="Left" Width="320">
<TextBlock Height="20" Text="asaasdasd"></TextBlock>
<TextBlock Height="20" HorizontalAlignment="Left"
Background="Yellow" Text="{Binding DataContext.FullName,
UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Height="20" HorizontalAlignment="Left"
Background="Yellow" Text="{Binding
DataContext.RowSelectedItem,
UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
<WrapPanel HorizontalAlignment="Right">
<Button Content="DELETE" HorizontalAlignment="Right"
VerticalAlignment="Top"
Width="auto" Height="50" Margin="3" Command="
{Binding DataContext.DeleteCommand, ElementName=List}"
CommandParameter="{Binding SelectedItem,
ElementName=List}"/>
</WrapPanel>
</StackPanel>
</Grid>
</Window>
You must fill DataContext
<Window x:Class="SampleApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SampleApplication"
Title="MainWindow" Height="350" Width="525">
Or set it in Code
DataContext = new ViewModel();

How to add images to UserControl menu in Wpf

enter code here<Window
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:EPOS.Desktop.View"
xmlns:vm="clr-namespace:EPOS.Desktop.ViewModel"
xmlns:UserControls="clr-namespace:EPOS.Desktop.UserControls"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar" x:Class="EPOS.Desktop.View.MainSaleUI"
mc:Ignorable="d"
Title="MainSaleUI"
Width="1046" Height="500" Left="500" Top="500"
Background="SkyBlue"
WindowStartupLocation="CenterScreen"
>
<Window.Resources>
<DataTemplate DataType="{x:Type vm:QeueOrdersViewViewModel}">
<UserControls:QeueOrders />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:TillViewModel}">
<UserControls:TillUC/>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SettingViewModel}">
<UserControls:Settings/>
</DataTemplate>
</Window.Resources>
<Grid Margin="0,67,65,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="ListBoxMenu"
Grid.Column="0" Margin="5"
ItemsSource="{Binding Settings}"
SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Padding="10"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.Column="1" Margin="5,5,10,5" BorderBrush="#FF7F9DB9" BorderThickness="1">
<ContentControl Content="{Binding ElementName=ListBoxMenu, Path=SelectedItem}" Margin="0,0,225,0"/>
</Border>
</Grid>
Blockquote
How to add images to User-control menu in Wpf. These are dynamic menus. Is there way to add images to every text?
I'm not sure about what you exactly want... assuming that you want to display some image right after /before the text on your listbox you can add an image property in your "settings" class (Binding of your Listbox's Itemsource) and change your listbox's datatemplate content with something like this :
<StackPanel>
<TextBlock Text="{Binding Name}" Padding="10"/>
<Image Source="{Binding Image }" />
</StackPanel>

My WPF UserControl must never get wider than the containing ButtonBar

I have bound at top the Width of the UserControl to the Width of the ButtonGrid at top.
It does not work. I want my UserControl always that wide as the width of the ButtonGrid. The problem is loading documents with a long name > Sum(Width of 3 buttons) makes the UserControl as wide as the document name. Now imagine having document names with 100 chars or longer and you add documents the UserContol will bump and jump...
<UserControl x:Class="TBM.View.DocumentListView"
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:Behaviours="clr-namespace:FunctionalFun.UI.Behaviours"
xmlns:Helper="clr-namespace:TBM.Helper"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Width="{Binding ElementName=ButtonGrid,Path=Width}"
>
<UserControl.Resources>
<Helper:BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox
SelectionMode="Extended"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
Behaviours:MultiSelectorBehaviours.SynchronizedSelectedItems="{Binding SelectedDocumentViewModelList,Mode=TwoWay}"
Width="Auto"
Focusable="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Name="documentListBox"
BorderThickness="1"
ItemsSource="{Binding DocumentList}"
Visibility="{Binding ElementName=documentListBox,Path=HasItems, Converter={StaticResource boolToVisibilityConverter}}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="{Binding Path=Id}" />-->
<TextBlock Text="{Binding Path=DocumentName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<UniformGrid x:Name="ButtonGrid"
Grid.Row="1"
Rows="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
>
<Button Command="{Binding Path=DeleteDocumentCommand}" HorizontalAlignment="Stretch" Content="Delete" />
<Button Command="{Binding Path=AddDocumentCommand}" HorizontalAlignment="Stretch" Content="Add" />
<Button Command="{Binding Path=OpenDocumentCommand}" HorizontalAlignment="Stretch" Content="Open" />
</UniformGrid>
</Grid>
</UserControl>
You could also set the width of the ParentGrid(containing the control) to a fixed size, en then horizontal alignment to Stretch
Try 2 stuff
Use horizontal alignment on user control to stretch
Set binding to MaxWidth same as Width binding

Problem using * in Grid sizes

When I set a column's width or a row's height to star, and I fill in content that is bigger than the available rectangle, the row keeps on growing 'underground':
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="100" Width="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel>
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
<StackPanel Grid.Row="1"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.IsDeferredScrollingEnabled="True">
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
</Grid>
</Window>
I want that StackPanel should not grow underground, instead it should show scrollbars.
Note, I need all the size dynamic so everything changes according to the user resizing the parents.
I have the same issue with columns.
PS. RowDefinition.Height is always * by default.
UPDATE
I guess the problem is the grid and the previous snippet I posted didn't provide the whole story, please review:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<StackPanel>
<TextBlock Text="Hello"/>
<TextBox Text="World!"/>
</StackPanel>
<ScrollViewer>
<StackPanel>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Window>
I'm not sure that StackPanel has a built in ScrollViewer so setting the ScrollViewer.* attached proeprties really has no effect on it.
Have you tried wrapping the StackPanel with a ScrollViewer explicitly? For example:
<ScrollViewer Grid.Row="1"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.IsDeferredScrollingEnabled="True">
<StackPanel>
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
</ScrollViewer>

Resources