I am noob in WPF. I have a tab control with an icon on the tabs. When I import it by ElementHost the control in winforms, the icon does not appear on the tab. I load the icon image from Resource.
XAML Code:
<UserControl x:Class="WPF_Prueba.TabControl"
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">
<UserControl.Resources>
<ResourceDictionary>
<BitmapImage x:Key="tabIcon" UriSource="/Resources/delete.png" />
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<TabControl Name="tabDynamic" ItemsSource="{Binding}" SelectionChanged="tabDynamic_SelectionChanged">
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<Button Name="btnDelete" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" DockPanel.Dock="Right" Background="Transparent" Margin="5,0,-3,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
<Image Source="{StaticResource tabIcon}" Height="10" Width="10"></Image>
</Button>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem}, Path=Header}" />
</DockPanel>
</DataTemplate>
</TabControl.Resources>
</TabControl>
</Grid>
</UserControl>
If anyone can help me please. Sorry for typos.
Best regards.
Make sure your png file has it's Build Action set to Resource:
Related
I'm using MVVM pattern in WPF. My small project contains 1x Window and 3x UserControls. Each UserControl represents tab, please see the picture below.
Solution structure
What I'm trying to do is to bind the Window Title to the variable in each tab model. I tried to use Interaction.Triggers and event name "Loaded". The command "ChangeTitle" works fine when I switch between different views but when I select tab with the same view as previously selected tab then title doesn't change until I switch to another tab with different view. I tried other events but couldn't find any for this purpose. I would like to trigger the above command after tab selection changed. Please advise. Thank you.
MainWindow.xaml
<Window x:Class="LSS_doc.Views.MainWindow"
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:intr="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:models="clr-namespace:LSS_doc.Models"
xmlns:Views="clr-namespace:LSS_doc.Views"
mc:Ignorable="d"
Height="350" Width="525"
MinHeight="350"
MinWidth="525">
<Grid>
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="Loaded">
<intr:InvokeCommandAction Command="{Binding CreateMainTab}"/>
</intr:EventTrigger>
</intr:Interaction.Triggers>
<DockPanel>
<TabControl Name="tabControl" ItemsSource="{Binding Tabs}" SelectedIndex="{Binding TabIndex}">
<TabControl.Resources>
<DataTemplate DataType="{x:Type models:MainTabModel}">
<Views:MainTabView/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:ResultTabModel}">
<Views:ResultTabView/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:DisplayTabView}">
<Views:DisplayTabView/>
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type models:ITabModel}">
<TextBlock>
<Run Text="{Binding Name}"/>
<Hyperlink Command="{Binding CloseCommand}" ><Run Text="{Binding CloseButton}"/></Hyperlink>
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DockPanel>
</Grid>
MainTabView.xaml
<UserControl x:Class="LSS_doc.Views.MainTabView"
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:intr="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="Loaded">
<intr:InvokeCommandAction CommandParameter="{Binding Name}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ChangeTitle}"/>
</intr:EventTrigger>
</intr:Interaction.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Name="searchBox" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.Keywords}" Margin="10,10,10,10" Height="30"/>
<Button Name="searchButton" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.Search}" Grid.Column="1" Margin="0,0,10,0" Height="30"/>
<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="10,0,10,10" BorderThickness="0">
<TreeViewItem Header="{Binding Name}" IsExpanded="True">
<TreeViewItem Header="Level 2.1" />
<TreeViewItem Header="Level 2.2" IsExpanded="True">
<TreeViewItem Header="Level 3.1" />
<TreeViewItem Header="Level 3.2" />
</TreeViewItem>
<TreeViewItem Header="Level 2.3" />
</TreeViewItem>
</TreeView>
</Grid>
ResultTabView.xaml
<UserControl x:Class="LSS_doc.Views.ResultTabView"
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:intr="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="Loaded">
<intr:InvokeCommandAction CommandParameter="{Binding Name}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ChangeTitle}"/>
</intr:EventTrigger>
</intr:Interaction.Triggers>
<Grid>
<ListBox x:Name="FileList" ItemsSource="{Binding Result}">
<ListBox.ItemTemplate>
<DataTemplate DataType="string">
<TextBlock>
<Hyperlink CommandParameter="{Binding}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.DisplayFile}">
<TextBlock Text="{Binding}"/>
</Hyperlink>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
DisplayTabView.xaml
<UserControl x:Class="LSS_doc.Views.DisplayTabView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:intr="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:LSS_doc.Helpers"
xmlns:ns="clr-namespace:LSS_doc.Helpers"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="Loaded">
<intr:InvokeCommandAction CommandParameter="{Binding Name}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ChangeTitle}"/>
</intr:EventTrigger>
</intr:Interaction.Triggers>
<Grid >
<WebBrowser local:WebBrowserExtensions.BindableSource="{Binding FileUrl}" local:WebBrowserExtensions.BindableLoaded="{Binding AcceptedKeywords}"/>
</Grid>
You can bind Window Title directly to model using ElementName:
<Window Title="{Binding ElementName=tab,Path=SelectedItem.WindowTitleForThisTab}">
I am trying to create my own data template and bind data to that and use that template in Mainpage.xaml, The template was created in DataTemplates.xaml, and linked or loaded in App.xaml.
I followed this resource: http://igrali.com/2015/06/14/how-to-use-compiled-bindings-xbind-from-a-resource-dictionary/
Someone please help me in displaying the data in UI.
I am doing this in windows 10 Universal App Development.
Thanks in Advance.
My App.xaml code:
<Application
x:Class="Listview.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Listview"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--<local:DataTemplates/>-->
<ResourceDictionary Source="DataTemplates.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
My DataTemplates.xaml code:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Listview"
x:Class="Listview.DataTemplates">
<DataTemplate x:Key="IconTextDataTemplate">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
My MainPage.xaml code:
<Page
x:Class="Listview.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Listview"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="IconTextGrid" Height="500" Width="500"
ItemTemplate="{StaticResource IconTextDataTemplate}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Page>
Need to bind ItemSource proeprty of ListView.
You may use binding in DataTemplate to display dynamic data.
<DataTemplate x:Key="IconTextDataTemplate">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="{Binding firstname}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
I am loading images from a folder, showing them in a wrappanel in a windows 'Large Icons'-kind of way, so the user can choose/mark which images he would like.
Currently I am reading the image filelocations, add them to a list of strings, and sets the ItemSource to an ItemsControl which looks like this:
<ItemsControl x:Name="ItemsControlPhotos" Margin="10" >
<ItemsControl.Template>
<ControlTemplate>
<WrapPanel FlowDirection="LeftToRight" IsItemsHost="true">
</WrapPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Image Source="{Binding}" Width="100" Height="100" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
That seems to work fine. But some of the images looks wierd, it is as if they are only drawn once.
Please refer to this video for an example.
I´ve tried to manually update the list with several different approaches:
ItemsControlPhotos.Items.Refresh();
ItemsControlPhotos.InvalidateArrange();
ItemsControlPhotos.InvalidateMeasure();
ItemsControlPhotos.InvalidateVisual();
But none of it has any effect, so I´m kind of lost.
Thank you very much for your help! :)
EDIT:
This is the full window markup:
<Window x:Class="Name.Space"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
Title="PhotoChooser"
WindowState="Maximized"
Width="1280"
>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">40</System:Double>
</ResourceDictionary>
</Window.Resources>
<Border BorderBrush="Black" BorderThickness="1" Background="White" Width="1280">
<DockPanel>
<Image Source="..\Images\BGTop.png" DockPanel.Dock="Top" Grid.Row="0" />
<Grid DockPanel.Dock="Top" Margin="0,-80,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer>
<ItemsControl x:Name="ItemsControlPhotos" Margin="10" >
<ItemsControl.Template>
<ControlTemplate>
<WrapPanel FlowDirection="LeftToRight" IsItemsHost="true">
</WrapPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Image Source="{Binding}" Width="100" Height="100" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid DockPanel.Dock="Bottom">
<Button Height="50" Width="200" Click="ButtonBase_OnClick">Add photos</Button>
<Image Source="..\Images\BGBottom.png" Grid.Row="99" VerticalAlignment="Bottom" Margin="0,0,0,0" />
</Grid>
</DockPanel>
</Border>
</Window>
I´ve didnt really figure the problem out, but I found a solution while working with the project.
Instead of loading the whole image, I would like to only load a thumbnail, to speed up the process. So I followed this link: http://blogs.msdn.com/b/dditweb/archive/2007/08/22/speeding-up-image-loading-in-wpf-using-thumbnails.aspx
And now the problem is gone.
Thank you for your contribution! :)
I have a TabItem that has it's DataContext set to a ViewModel.
The header is set to a header View and the Content is set to an item view
However this Binding from the item view just doesn't work
<TextBox Margin="0" Grid.Column="0" Grid.Row="0" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=sdk:TabItem, AncestorLevel=1}, Path=DataContext.Job.SourceCode, Mode=TwoWay}"/>
yet this binding
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=sdk:TabItem, AncestorLevel=1}, Path=DataContext.Job.Name}"/>
which is in the header view works fine.
I've even tried putting the TextBlock from the Header into the Item and setting the Content to a new HeaderView. No matter what I try I can't get the bindings from the Content to work even though the header binding works fine
Can anyone explain?
Adding the full Views as requested first the Item
<UserControl x:Class="IE.Intergration.JobBuilder.Views.TabbedJobs.TabbedJobItem"
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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=New.TabbedJobs.TabbedJobItem}"
>
<UserControl.Resources>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" >
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Margin="0" Grid.Column="0" Grid.Row="0" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=sdk:TabItem, AncestorLevel=1}, Path=DataContext.Job.SourceCode, Mode=TwoWay}"/>
<StackPanel Grid.Column="0" Grid.Row="1" FlowDirection="LeftToRight" Orientation="Horizontal">
<Button Content="Save" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=sdk:TabItem, AncestorLevel=1}, Path=DataContext.Save}" />
</StackPanel>
</Grid>
and the Header
<UserControl x:Class="IE.Intergration.JobBuilder.Views.TabbedJobs.TabbedJobItemHeader"
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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=New.TabbedJobs.TabJobHeader}"
>
<Grid x:Name="LayoutRoot">
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=sdk:TabItem, AncestorLevel=1}, Path=DataContext.Job.Name}"/>
</Grid>
I'm trying to put a textblock in a grid element, but it doesn't display in the debug mode. What do I do wrong? Maybe it's caused that I manipulate the window directly by my C# code?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="500" ResizeMode="NoResize">
<Window.Background>
<ImageBrush ImageSource="/WpfApplication2;component/Images/Grass0118_22_S.jpg"></ImageBrush>
</Window.Background>
<Grid>
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Grid>
</Window>
Try this
<Grid>
<Stackpanel Orientation = "Horizontal">
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Stackpanel>
</Grid>
I've already solved my issue.
I had defined a canvas tag in my C# code and it overwrote the XAML changes. I replaced the XAML code to the following
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="500" ResizeMode="NoResize">
<Window.Background>
<ImageBrush ImageSource="/WpfApplication2;component/Images/Grass0118_22_S.jpg"></ImageBrush>
</Window.Background>
<Canvas>
<Grid>
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Grid>
<Canvas Name="mycanvas"></Canvas>
</Canvas>
</Window>
and removed the line creating the canvas element from my C# code and everything works now.
Thanks!