my task is to make DataTemplate list, and create a button for changing the view.
I have the "Data" and "FootballTeam" classes, and also I have the Static Resources. I need help for the button event, how can I change the current template?
As a tip, the example says to use this method:
"this.Resources[resource-key] as data-type;"
The XAML:
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="250"
Width="300">
<Window.Resources>
<DataTemplate x:Key="teamName">
<TextBlock FontWeight="Bold"
Text="{Binding Path=TeamName}"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="year">
<TextBlock Text="{Binding Path=FoundingYear}"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="logo">
<Image Source="{Binding Path=Image}" />
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0"
AllowDrop="True">
<ListBox Name="lstTeams">
</ListBox>
</ScrollViewer>
<Button Grid.Row="1"
Margin="6">Change View</Button>
</Grid>
</Window>
I guess you want to change the listbox template so, try this :
In XAML
<Button Grid.Row="1" Margin="6" Click="changeTemplate">Change View</Button>
In C#
lstTeams.ItemTemplate = (DataTemplate)this.Resources["teamname"];
You have to handle the different templates you want to cycle through but, this is pretty much how to do it code-behind.
Related
I have a Page that allow the user to load multiple images thumbnails from his folders.
The number of rows update nicely when the width of the window is changed
The only thing that I could not figure out how to make it work is having the vertical scroll bars, I pretty much tried every settings possible.
At first my root was a stackPanel so I switched to a Grid to see if there would be any difference.
here is my xaml
<Page
x:Class="IMG.Pages.UploadPage"
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:img="using:IMG"
xmlns:local="using:IMG.Pages"
xmlns:Models="using:IMG.Models"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Padding="2"
BorderBrush="Black"
BorderThickness="1"
Orientation="Horizontal">
<Button Click="GetPhoto" Content="get images" />
</StackPanel>
<GridView x:Name="ImageGrid" Width="Auto" Background="LightBlue" Grid.Row="1" Margin="5" Height="Auto"
SizeChanged="ImageGridSizeChanged"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:Name="ImgThumbnail" x:DataType="Models:ImageData">
<StackPanel
Width="100"
Height="120"
Margin="5"
AutomationProperties.Name="{x:Bind Hash}">
<StackPanel Margin="1">
<TextBlock Text="{x:Bind File}" />
</StackPanel>
<Image x:Name="thumbIMG" Width="80" Height="100" Stretch="UniformToFill" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
At first the gridview is empty, the user click on the button and then in the FileOpenPicker he can choose multiple images and they are added as thumbnail binded to an ObservableList of ImageData
The binding work nicely, I am simply stuck on the scrollbar
I have experienced the same issue and I fixed it by setting the height of the gidview on the fix size instead of auto. And than you can set
ScrollViewer.VerticalScrollBarVisibility = "Visible"
ScrollViewer.VerticalScrollMode = "Enable"
I made a popup control that can accept any view of type FrameworkElement. In addition, you can provide a view model, which will be bound to the DataContext of the child view being provided. Everything works, but it takes a couple of seconds to render the data. The view model has an ObservableCollection that contains about 300 items. So in all honesty, 300 items shouldn't cause any issues.
There is no lag what so ever, If I extract the xaml from the popup to a regular page.
So, is there something inside a Popup control that happens when it's Child content property is being set, that would cause such a delay? Because this is blowing my mind at the moment.
Thanks in advance!
[Update]
As requested, the XAML that forms the child content of the tool window:
<UserControl
x:Class="App.Controls.ContactSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d" x:Name="contactSelector"
DataContext="{Binding ContactSelectorViewModel,Source={StaticResource Locator}}">
<Grid HorizontalAlignment="Stretch" Style="{StaticResource BaseGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" ItemsSource="{Binding ContactCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!--<Image Margin="0,0,10,0" Grid.Row="0" Grid.Column="0"
Source="{Binding Thumbnail}" MaxHeight="35"
Visibility="{Binding Thumbnail, Converter={StaticResource ObjectNullToVisibilityConverter}}" />-->
<!--<Image Margin="0,5,5,5" Grid.Row="0" Grid.Column="0" MaxHeight="35"
Source="ms-appx:///Assets/Images/Contact.png"
Visibility="{Binding Thumbnail, Converter={StaticResource InverseObjectNullToVisibilityConverter}}" />-->
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding FullName}"
VerticalAlignment="Center"
Style="{StaticResource TextBlockMedium}" />
<!--<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0" ItemsSource="{Binding MobileNumbers}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="0"
Text="{Binding Number}"
HorizontalAlignment="Stretch"
Style="{StaticResource TextBlockMedium}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction
Command="{Binding DataContext.SelectContact, ElementName=contactSelector}"
CommandParameter="{Binding}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<!--<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border>
<TextBlock Text="{Binding Key}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Style="{StaticResource TextBlockMedium}"
Padding="5" Margin="5" FontWeight="SemiBold" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>-->
</ListView>
</Grid>
</UserControl>
So I have commented out the entire section of the ItemsControl, but this did not solve the problem. When the Popup opens, it still takes quite a while to show the containing items.
It isn't slow when it's scrolling, it's slow in rendering the initial items.
The problem is in the ItemsControl which displays the MobileNumbers collection. You should not have an ItemsControl as an ItemTemplate for another ItemsControl (in your case, the ListView). You can do that only when you display small amount of items.
Because of this your MobileNumbers items are not virtualized and this is where the performance problem comes from, as all the items need to be displayed to render the item template.
You can try creating a flat list of objects, and then use ItemTemplateSelector to display different item templates for different types. For example you could have the following ObservableCollection as the ItemsSource:
Header
Contact info
Mobile number1
Mobile number2
Header
Contact info
Mobile number
etc.
I have a UserControl which contains a ContentControl, which in turn should present a UserControl depending on the view model which is set as DataContext.
The XAML:
<UserControl.Resources>
<DataTemplate DataType="{x:Type pcViewModels:SystemPCViewModel}">
<controls:SystemPCControl />
</DataTemplate>
<DataTemplate DataType="{x:Type pcViewModels:ChipPCViewModel}">
<controls:ChipPCControl />
</DataTemplate>
<!-- Left out other definition, I guess you get the point -->
</UserControl.Resources>
<Grid Background="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Background="Blue">
<ContentControl DataContext="{Binding CurrentContent}"/>
</ScrollViewer>
<StackPanel
Grid.Row="1"
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button
Width="150" Height="50"
Content="Configure"
VerticalAlignment="Center"
Command="{Binding CurrentContent.ConfigureCommand}" />
</StackPanel>
</Grid>
I made the backgrounds of the Grid and ScrollViewer ugly visible just to be sure it was visible. So that's all visible, I can see that the view model is as DataContext (the button is also working fine).
I used a ContentControl before, and to all my knowledge exactly like this. What am I doing wrong?
You must set the Content property of your ContentControl. You can do either of the following:
<ContentControl DataContext="{Binding CurrentContent}" Content="{Binding}" />
or
<ContentControl Content="{Binding CurrentContent}" />
i have a list of users that are bound to a listbox(image and the name of the user) and i want to render this lisbox clickable so whnever i click on a user's image i will be redirected
to his account.
this is the user control that displays the users:
<UserControl x:Class="Navigateur.Presentation.UserControlWork.ListeEnfControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:conv="clr-namespace:Navigateur.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" Height="Auto" Width="Auto"
>
<UserControl.Resources>
<conv:ByteArrayToImageConverter x:Key="bytearraytoImageConverter" />
</UserControl.Resources>
<Grid >
<ListBox x:Name="_imageList" Margin="10,10,10,0" IsSynchronizedWithCurrentItem="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top" Height="250" BorderThickness="0" MouseLeftButtonDown="Click_Kid" >
<ListBox.ItemTemplate>
<DataTemplate DataType="Enfant">
<Border CornerRadius="30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" x:Name="image" Source="{Binding avatar}" Width="50" Height="80"/>
<TextBlock Grid.Row="1" x:Name="nom" Text="{Binding prenom}" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Use Button in place of Image and override template of Button to give it an Image look, so that you can have clickable image.
<Button Grid.Row="0" Width="50" Height="80">
<Button.Template>
<ControlTemplate>
<Image x:Name="image" Source="{Binding avatar}"/>
</ControlTemplate>
</Button.Template>
</Button>
If you are using MVVM, you can bind Command with button OR if want to do in code behind you can hook Click event of button to determine which image is clicked on.
I have a listbox with a textbox
The textbox is defined in a datatemplate that ends like this
<TextBlock Grid.Row="4" Grid.Column="0" Text="Note"></TextBlock>
<TextBox Height="Auto" Grid.Row="4" Grid.Column="1"
Text="{Binding PartData.Note}" AcceptsReturn="True" TextWrapping="Wrap" >
</TextBox>
</Grid>
I want the textbox to expand when the user enters multiple rows but it doesnt. The rowdefintion height is set to *
I've tried your sample with this code, and it works (use Shift-Enter to start a new row inside TextBox)
<Window x:Class="TextBoxWrap.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">
<Grid>
<ListBox Height="140" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Note"/>
<TextBox Margin ="10, 0,0,0" Height="Auto" Grid.Row="1" Grid.Column="1" Text="{Binding Count}"
AcceptsReturn="True" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
You need to add
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
to TextBox so it takes all available space.