Develop Reference

How to add images to a ListView in WPF

I want to add images to a ListView. I have converted image to BitmapImage. I have collection of objects that contain Image property which is bind to DataTemplate.
<UserControl.Resources>
<DataTemplate x:Key="ImageCell">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding DocumentPicture,UpdateSourceTrigger=PropertyChanged}"
Stretch="Fill" IsEnabled="True" Visibility="Visible"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<ListView Name="lstView" Grid.Column="0" Grid.Row="3" Margin="5" Height="90" Width="Auto"
ItemsSource="{Binding ListDocuments ,UpdateSourceTrigger=PropertyChanged}" ItemTemplate="
{StaticResource ImageCell}" BorderThickness="1" Style="{x:Null}" SelectedItem="{Binding
SelectedLstImage}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Style="{x:Null}"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
It gives me this output : ( Do not worry about the red background that i set to identify the images in the list. )

Remove both the instances of ,UpdateSourceTrigger=PropertyChanged from your bindings. They're doing nothing.
Remove the stackpanel around the image. That's doing nothing.
Make the listview a listbox. Give the image a width.
Check the names of the things you're binding.
Ensure DocumentPicture is set to something and it's really a public bitmapimage property
<UserControl.Resources>
<DataTemplate x:Key="ImageCell">
<Image Source="{Binding DocumentPicture}"
Width="80"
Stretch="Fill" IsEnabled="True" Visibility="Visible"/>
</DataTemplate>
</UserControl.Resources>
<ListBox Name="lstView" Grid.Column="0" Grid.Row="3" Margin="5" Height="90" Width="Auto"
ItemsSource="{Binding ListDocuments}" ItemTemplate="
{StaticResource ImageCell}" BorderThickness="1" Style="{x:Null}" SelectedItem="{Binding SelectedLstImage}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Style="{x:Null}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
See how much closer to working that is.

You could do it programmatically by Iterate throw your List of Images and Instanciate a new Image and add it with lstView.Items.Add()
I made a super simple example:
<Grid>
<ListView x:Name="View"></ListView>
<Button Click="Button_Click" Height="20" Width="20">Button</Button>
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < 20; i++)
{
Label lbl = new Label();
lbl.Content = "Label " + i;
View.Items.Add(lbl);
}
}

WPF C# reducing render time, for mutli usercontrol layout

Hello I have problem with my WPF page loading it took more than 2 seconds, my page contains 2 listview one listview contains ~70 items and second one contains ~355 items, of course everyone would say use virtualization and you done, yes it used but not on listview but on higher level, since my app use one scrollviever = one page method, I highly think due to this method virtualization does not work as expected since if it would work loading times be much better, one row took between 15-25ms to render
This is my problematic code:
<UserControl x:Class="app.OS.Tabs.Controls.SectionATabs"
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:helpButton="clr-namespace:app.COMMON.USERCONTROLS.HelpButton"
xmlns:Buttons="clr-namespace:app.COMMON.USERCONTROLS.Buttons"
mc:Ignorable="d"
Height="Auto"
Width="Auto"
MinHeight="120">
<VirtualizingStackPanel IsVirtualizing="True" ScrollViewer.CanContentScroll="True" >
<TextBlock MaxWidth="948" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." TextWrapping="Wrap" Style="{StaticResource GrayText}" Margin="0,15,0,7"/>
<ListView x:Name="DataList"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VirtualizingPanel.IsVirtualizing="False"
ScrollViewer.CanContentScroll="False"
SelectionMode="Single" ItemContainerStyle="{StaticResource ListViewItemWithGridStandard}" BorderBrush="{x:Null}" Foreground="{x:Null}"
>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource HeaderRemover}" AllowsColumnReorder="False">
<GridViewColumn Width="400">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel Height="47">
<TextBlock TextTrimming="CharacterEllipsis" ToolTip="{Binding Description,IsAsync=True,Mode=OneWay}" MaxWidth="360" Style="{StaticResource BlackText}" Height="21" DockPanel.Dock="Top">
<Run Text="{Binding Description,IsAsync=True,Mode=OneWay}"/>
<helpButton:HelpButton KeyToSearch="{Binding KeyToSearch,IsAsync=True,Mode=OneWay}" SectionToUse="sectionA" HeaderButton="False" />
</TextBlock>
<TextBlock Style="{StaticResource GrayText}" VerticalAlignment="Bottom" >Current: <Run Text="{Binding CurrentValue,IsAsync=True,Mode=OneWay}"/><LineBreak/>Good Value:<Bold>0%</Bold></TextBlock>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="540">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Width="528">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel>
<Buttons:Buttons x:Name="DefaultValueButton" OnClick="DefaultValueButton_OnOnClick" ButtonContent="Default" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HeaderColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource BorderColor}" IsActive="{Binding IsDefault,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding DefaultValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<StackPanel Margin="9,0,0,0">
<Buttons:Buttons x:Name="RecommendedValueButton" OnClick="RecommendedValueButton_Click" ButtonContent="Recommended" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HddColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsRecommended,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding RecommendedValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<Rectangle Width="1" Fill="{StaticResource SeparatorColor}" Height="24" Margin="16,0" VerticalAlignment="Top" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Buttons:Buttons x:Name="EnableCustomValuesButton" OnClick="EnableCustomValuesButton_Click" ButtonContent="Custom" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource CpuColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsCustom,IsAsync=True,Mode=OneWay}"/>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsCustomEnabled,IsAsync=True,Mode=OneWay}" VerticalAlignment="Top" >
<Border CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource SeparatorColor}" Width="90" Margin="7,0">
<Border.Clip>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0 0, 90 25"/>
</Border.Clip>
<TextBox Width="86" Height="23" x:Name="CustomValue" Text="{Binding CustomInputValue,IsAsync=True,Mode=OneWay}" BorderBrush="{x:Null}" HorizontalAlignment="Center" />
</Border>
<Buttons:Buttons x:Name="CustomValueApply" OnClick="CustomValueApply_Click" ButtonContent="Apply" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource BorderColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource BorderColor}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</VirtualizingStackPanel>
This which may raise questions Buttons:Buttons is usercontrol inside it is border and inside border is textblock, helpButton:HelpButton is usercontrol inside it is border inside it is canvas with textblock and image(after some time image is disabled and on first time only image is shown only), headerremover sets GridViewColumnHeader visibility to collapsed, ListViewItemWithGridStandard is style which modify Control.Template adding inside Border and inside it adds GridViewRowPresenter, as you can see SectionATabs is tabcontrol > tabitem child, but tabcontrol is in page between page and tabcontrol is scrolviewer. page and scrollviewer has fixed height(maxheight also same) which is 501, also page is created way before user clicks for the first time, I think I told everything, now what can be done to reduce loading times? Thank you.

Get TabItem Name in UserControl

I have the following code that creates a TabControl. Each tab contains a UserControl (code is below) that displays different data (one shows Local tax info and the other show Fed/State tax info).
TabControl
<TabControl
Name="MappingTabs"
Margin="6,7,7,8" Padding="6"
Background="White" >
<TabItem
Name="LocalTaxTab"
Padding="6,1"
Header="Local">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="LocalTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Local Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="LocalTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[0].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
<TabItem
Name="FedStateTaxesTab"
Padding="6,1"
Header="Federal\State">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="FedStateTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Federal \ State Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="FedStateTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[1].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
</TabControl>
</StackPanel>
UserControl (TaxCodeMappingFooter)
<Button
Name="AddButton"
Grid.Row="0"
Grid.Column="0"
Height="20" Width="20"
Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="(want the tab name here)"
Style="{StaticResource ImageButton}"
ToolTip="Add a rule"
local:AttachedImage.Image="{StaticResource AddImageSource}" />
The UserControl (TaxCodeMappingFooter) contains an Add button that I need to wire up via RelayCommand to the VM. I need to somehow tell the VM which tab is calling the Add command so that an item can be added to the correct collection. I thought about sending the TabName and then keying off that to know which tab the user is on.
Is my idea correct or is the a better way to do this and if it is correct how do I get the TabName value to pass it back as a CommandParameter?

If you are going to hard code your UI controls as you have done, then perhaps your simplest option is to define a string DependencyProperty in your TaxCodeMappingFooter control:
public static readonly DependencyProperty TabNameProperty = DependencyProperty.
Register("TabName", typeof(string), typeof(TaxCodeMappingFooter));
public string TabName
{
get { return (string)GetTabName(TabNameProperty); }
set { SetTabName(TabNameProperty, value); }
}
Then you could set it from your TabItems:
<local:TaxCodeMappingFooter TabName="FedStateTaxesTab" DataContext="{Binding
RelativeSource={RelativeSource AncestorType=UserControl}}" />
And Bind to it from inside your control:
<Button Name="AddButton" Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="{Binding TabName, RelativeSource={RelativeSource
AncestorType=TaxCodeMappingFooter}}" ... />

As others have said, if you model your view model structure appropriately, this would not be much of an issue.
If you really want to bind against an ancestor element, you can use a RelativeSource of FindAncestor, then specify the AncestorType. Note that you may need to tweak AncestorLevel if you are the descendant of more than one TabItem.
{Binding Path=Name
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabItem}}}
(wrapping added for clarity)

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>

See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.

How to change datatemplate through code

I have ListBox and DataTemplate
I need Set GroupBox Heigth = 300
How to do it?
<DataTemplate x:Key="data_template">
<GroupBox Header="Категория" Width="300" HorizontalAlignment="Stretch" x:Name="GroupBox">
<DockPanel Tag="{Binding id}">
<Button Click="Button_Click" DockPanel.Dock="Top" >
<Button.Content>
<DockPanel>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" DockPanel.Dock="Top" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<l:ScrollViewerEx VerticalScrollBarVisibility="Auto" >
<TextBlock Text="{Binding description}" DockPanel.Dock="Top" TextWrapping="Wrap" Padding="5" IsHitTestVisible="False" />
</l:ScrollViewerEx>
</DockPanel>
</Button.Content>
</Button>
</DockPanel>
</GroupBox>
</DataTemplate>

In case, someone tried to resolve my previous question, I did it like the following:
DataTemplate mycolumnDataTemplate = null;
var dataTemplateStream = new SomeClass().GetType().Assembly.GetManifestResourceStream("Some.Namespace.SomeReosurceName.xaml");
string dataTemplateString = new System.IO.StreamReader(dataTemplateStream).ReadToEnd();
dataTemplateString = dataTemplateString.Replace("[0]", browserColumn.ColumnName);
mycolumnDataTemplate = XamlReader.Load(dataTemplateString) as DataTemplate;

What are you trying to achieve? Do you want the GroupBox Height to be changed at the runtime of your application, when some event occurred or some data has changed? If so, then what you are probably looking for is a data trigger or event trigger, which you simply need to add to your DataTemplate.