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" />
Related
I got a button (using MaterialDesign theme) in a WPF form button that is not styling correctly, where am I going wrong?. The button in the DataGrid is fine. I tried near Window on mainWindow doing Foreground="white" but when I take the theme off everything returns to nornal WPF form with the text colour (lower right) missing
app.xamp:
<Application x:Class="App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:P2Assessment"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="mainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Purple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
main window with the frame:
<Window x:Name="frmMain" x:Class="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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Foreground="White"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}"
xmlns:local="clr-namespace:P2Assessment"
mc:Ignorable="d"
Title="XYZ & Co." Height="460" Width="800">
<Grid>
<materialDesign:Card Margin="16">
<Frame x:Name="frame" Margin="10,15,10,5">
<!-- navigate to different views-->
</Frame>
</materialDesign:Card>
</Grid>
frame navigating page:
<Page x:Class="P2Assessment.ViewOrders"
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"
Foreground="Wheat"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="ViewOrders">
<Grid>
<StackPanel>
<Label Content="View orders" FontSize="28" FontWeight="Bold" HorizontalAlignment="Center"/>
<DataGrid x:Name="dgOrders" AutoGenerateColumns="False" Height="260">
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}" Width="15"/>
<DataGridTextColumn Header="Date / Time" Binding="{Binding dateTime}" Width="200"/>
<DataGridTextColumn Header="# Items" Binding="{Binding Items}" Width="200"/>
<DataGridTextColumn Header="Total" Binding="{Binding Total}" Width="75"/>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="View order details" Click="ViewOrderDetails"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,15,0,0" >
<Button Content="Add an order" Margin="0,0,15,0" Padding="15" Click="AddOrderClicked" Style="{StaticResource MaterialDesignRaisedAccentButton}" Width="100"/>
<Button Content="Close" Margin="0,0,15,0" Padding="15" Click="Button_Click"/>
</StackPanel>
</StackPanel>
</Grid>
Thanks for your help
it was because of Padding="15" must've pushed the content outside the button area
I wanna know if it is posible the get the current usercontrol inside a contentcontrol of a mainview. Here's my xaml MainWindow
<Window x:Class="MatchGameModified.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:local="clr-namespace:MatchGameModified"
xmlns:viewModels="clr-namespace:MatchGameModified.ViewModels"
xmlns:views="clr-namespace:MatchGameModified.Views"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="450"
ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<!-- ViewModel revolver -->
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:StartGameViewModel}">
<views:StartGameView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:GameViewModel}">
<views:GameView/>
</DataTemplate>
</Window.Resources>
<!-- Bind DataContext via XAML-->
<Window.DataContext>
<viewModels:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding PlayerName}" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid Grid.Row="1" x:Name="MainContent">
<Border BorderThickness="2" BorderBrush="Black">
<ContentControl x:Name="ContentControl" Content="{Binding CurrentViewModel}"/>
</Border>
</Grid>
</Grid>
I know it is posible to get the mainwindow instance from a usercontrol, but I want to get a usercontrol element.
you can add event handler to Loaded event of each view
<DataTemplate DataType="{x:Type viewModels:StartGameViewModel}">
<views:StartGameView Loaded="ViewLoaded"/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:GameViewModel}">
<views:GameView Loaded="ViewLoaded"/>
</DataTemplate>
and get UserControl from sender argument:
private void ViewLoaded(object sender, RoutedEventArgs e)
{
var view = sender as UserControl;
}
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 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:
I want my items in listBox to stretch horizontally, but if item's content is bigger than listbox then horizontal scrollbar appears. How to avoid this?
Xaml:
<Window x:Class="WpfApplication6.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">
<Window.Resources>
<DataTemplate x:Key="testTemplate">
<Border x:Name="border"
BorderBrush="Black"
BorderThickness="1"
Margin="2"
Padding="2"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="listBox"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource testTemplate}" />
</Grid>
</Window>
Set ScrollViewer.HorizontalScrollBarVisibility to Disabled:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...
</ListBox>