I want to customize my listbox or listview to behave like the control on the following picture:
It's similar to FlipView but I've never worked with FlipView before and just saw some pictures.
I have found a good solution for me. It might helps somebody. I've changed it a little bit and It works perfectly for me.
http://www.codeproject.com/Articles/741026/WPF-FlipView
Try something like this
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<UserControl.Resources>
<DataTemplate x:Key="Test">
<Grid >
<Border Background="Red"
Loaded="RedBorder_OnLoaded" >
<!--content for this card goes here-->
<TextBlock Text="{Binding}"></TextBlock>
</Border>
<Border Background="Green"
Loaded="GreenBorder_OnLoaded"
Visibility="Collapsed" >
<!--content for this card goes here-->
<TextBlock Text="{Binding}"></TextBlock>
</Border>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Name="myListbox"
Margin="50"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ItemTemplate="{StaticResource Test}" />
<StackPanel Grid.Row="1"
HorizontalAlignment="Center"
Orientation="Horizontal">
<Button Width="20"
Height="20"
Background="Black"
Click="FirstButton_OnClick" />
<Button Width="20"
Height="20"
Background="Black"
Click="SecondButton_OnClick" />
</StackPanel>
</Grid>
</UserControl>
code behind
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication1
{
public partial class UserControl1 : UserControl
{
private readonly List<Border> redBorders = new List<Border>();
private readonly List<Border> greenBorders = new List<Border>();
public UserControl1()
{
InitializeComponent();
myListbox.ItemsSource = new List<string>() { "Batman", "Superman", "All others" };
}
private void RedBorder_OnLoaded(object sender, RoutedEventArgs e)
{
redBorders.Add(sender as Border);
}
private void GreenBorder_OnLoaded(object sender, RoutedEventArgs e)
{
greenBorders.Add(sender as Border);
}
private void FirstButton_OnClick(object sender, RoutedEventArgs e)
{
redBorders.ForEach(p => p.Visibility = Visibility.Visible);
greenBorders.ForEach(p => p.Visibility = Visibility.Collapsed);
}
private void SecondButton_OnClick(object sender, RoutedEventArgs e)
{
redBorders.ForEach(p => p.Visibility = Visibility.Collapsed);
greenBorders.ForEach(p => p.Visibility = Visibility.Visible);
}
}
}
usage
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1">
<wpfApplication1:UserControl1 />
it's pretty simple, but i guess you can improve it from here.
Related
I need to insert data from usercontrol into database.
I tried to set xml component into my model but it results in System.NullReferenceException.
Where is the problem ? How can I solve this?
usercontrol.cs:
public partial class League : UserControl
{
private Leagues _leagueVM;
public Leagues LeagueVM
{
get
{
_leagueVM.EnLeagueName = txtLeagueNameEN.Text;
_leagueVM.FaLeagueName = txtLeagueNameFA.Text;
_leagueVM.LeagueLogo = imgLogoLeague.Name;
return _leagueVM;
}
set
{
txtLeagueNameEN.Text = _leagueVM.EnLeagueName;
txtLeagueNameFA.Text = _leagueVM.FaLeagueName;
imgLogoLeague.Name = _leagueVM.LeagueLogo;
}
}
public League()
{
var leagueManager = Inject.Container.GetInstance<ILeagueService>();
InitializeComponent();
}
private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
FileDialog dialog = new OpenFileDialog();
dialog.ShowDialog();
}
private void btnInsertLeague_Click(object sender, RoutedEventArgs e)
{
var leagueManager = Inject.Container.GetInstance<ILeagueService>();
leagueManager.Add(LeagueVM);
}
}
xml:
<UserControl x:Class="Bet.UControl.UControls.League"
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:Bet.UControl.UControls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800" Width="1255" Height="624">
<Grid Margin="10,0,10,10">
<GroupBox Header="New League" Background="#fff" HorizontalAlignment="Center" Height="151" Margin="10,10,0,0" VerticalAlignment="Top" Width="1215">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Label Content="LeagueName (En) : " Foreground="Black" Width="111" FontFamily="Rockwell" Height="28"/>
<TextBox x:Name="txtLeagueNameEN" Width="199" Height="30" Margin="10,20,30,40" />
<Label Content="LeagueName (En) : " Foreground="Black" Width="111" FontFamily="Rockwell" Height="28"/>
<TextBox x:Name="txtLeagueNameFA" Width="199" Height="30" Margin="10,20,30,40" />
<Label Content="League Logo " Foreground="Black" Width="111" FontFamily="Rockwell" Height="28"/>
<Image x:Name="imgLogoLeague" Width="90" Height="85" Margin="5,0,0,0" Source="E:\MyProject\Bet\Bet\Assetes\adfg.png" MouseDown="Image_MouseDown"/>
<Button x:Name="btnInsertLeague" Content="Add" Height="Auto" Width="75" Margin="100,27,30,43" Click="btnInsertLeague_Click"/>
</StackPanel>
</GroupBox>
<DataGrid HorizontalAlignment="Left" Height="420" Margin="15,184,0,0" VerticalAlignment="Top" Width="1210"/>
</Grid>
It seems you missed to create a Leagues object and assign it to _leagueVM.
Should be easy to see if you use the debugger.
i have an issue on Visual Studio(wpf) with the listbox.
If i want to insert or delete some data from the database, then they are working,but the listbox will just be refreshed if i'm clicking the menuitem for once. I think this is due to the load method, but why isn't it refreshing the data?
This is my XAML-Code:
<UserControl x:Class="WpfApplication1.AutorenBearbeiten"
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:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="300" Loaded="UserControl_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="28*" />
<ColumnDefinition Width="36*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Medien" Grid.ColumnSpan="2"
FontSize="16" />
<ListBox x:Name="box" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=at_nachname}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel DataContext="{Binding ElementName=box,Path=SelectedItem}" Grid.Column="1" Grid.Row="1" >
<TextBlock Text="Autoren_id" />
<TextBox Text="{Binding Path=at_id}" MaxLength="5"/>
<TextBlock Text="Vorname" />
<TextBox Text="{Binding Path=at_vorname}" MaxLength="30"/>
<TextBlock Text="Nachname" />
<TextBox Text="{Binding Path=at_nachname}" MaxLength="30"/>
<TextBlock Text="Geburtsdatum" />
<TextBox MaxLength="30" Text="{Binding Path=at_gebDatum, StringFormat=dd.MM.yyyy}" />
<Button Name="speichern" Height="23" Margin="4" Click="speichern_Click">Änderungen speichern</Button>
<Button Name="loeschen" Height="23" Margin="4" Click="loeschen_Click">Löschen</Button>
<StackPanel DataContext="{Binding ElementName=box}" Grid.Column="1" Grid.Row="1" >
<TextBlock Text="Autoren_id" />
<TextBox x:Name="id" MaxLength="5"/>
<TextBlock Text="Vorname" />
<TextBox x:Name="vorname" MaxLength="30"/>
<TextBlock Text="Nachname" />
<TextBox x:Name="nachname" MaxLength="30"/>
<TextBlock Text="Geburtsdatum" />
<TextBox x:Name="datum" MaxLength="30"/>
<Button x:Name="neubutton" Height="23" Margin="4" Click="neu_Click">Neu</Button>
<TextBlock Name="submitfehler" FontWeight="Bold" Foreground="Red" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
And this is the xaml.cs file :
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for AutorenBearbeiten.xaml
/// </summary>
public partial class AutorenBearbeiten : UserControl
{
libraryEntities6 db = new libraryEntities6();
public AutorenBearbeiten()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
var erg = db.a_autor;
erg.Load();
box.ItemsSource = erg.Local.OrderBy(m => m.at_id);
box.ItemsSource =
(from m in db.a_autor
orderby m.at_id
select m).ToList();
}
private void speichern_Click(object sender, RoutedEventArgs e)
{
try
{
db.SaveChanges();
}
catch(Exception e1)
{
submitfehler.Text = e1.Message;
}
}
private void loeschen_Click(object sender, RoutedEventArgs e)
{
a_autor am = (a_autor)box.SelectedItem;
if (am != null)
{
db.a_autor.Remove(am);
db.SaveChanges();
box.Items.Refresh();
}
}
private void neu_Click(object sender, RoutedEventArgs e)
{
a_autor autor = new a_autor();
autor.at_id = id.Text;
autor.at_vorname = vorname.Text;
autor.at_nachname = nachname.Text;
autor.at_gebDatum = Convert.ToDateTime(datum.Text);
//s1.s_k_klasse = liklassen.SelectedValue.ToString() setzt die Klasse via foreign key
//db.schuelers.AddObject(s1);
db.a_autor.Add(autor);
box.Items.Refresh();
/*
((klassen))liklassen.SelectedItem).schuelers.Add(s1); //setzt die klasse durch zuweisen zum nav.Property
lischueler.Items.Refresh(); //nötig weil das navigational seit ER 5 nicht observable ist
*/
}
}
}
A Picture from the window is below:
Window
There is no magic connection between the ListBox and the database so when you are calling the Add or Remove method of the DbContext the ListBox won't be affected.
What you should do is to set the ItemsSource property of the ListBox to an ObservableCollection<a_autor> and then call the Add/Remove method of this one besides calling the Add/Remove method of the DbContext:
System.Collections.ObjectModel.ObservableCollection<a_autor> _sourceCollection;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
var erg = db.a_autor;
erg.Load();
_sourceCollection = new System.Collections.ObjectModel.ObservableCollection<a_autor>((from m in db.a_autor
orderby m.at_id
select m).ToList());
box.ItemsSource = _sourceCollection;
}
private void loeschen_Click(object sender, RoutedEventArgs e)
{
a_autor am = (a_autor)box.SelectedItem;
if (am != null)
{
_sourceCollection.Remove(am);
db.a_autor.Remove(am);
db.SaveChanges();
box.Items.Refresh();
}
}
private void neu_Click(object sender, RoutedEventArgs e)
{
a_autor autor = new a_autor();
autor.at_id = id.Text;
autor.at_vorname = vorname.Text;
autor.at_nachname = nachname.Text;
autor.at_gebDatum = Convert.ToDateTime(datum.Text);
_sourceCollection.Add(autor);
db.a_autor.Add(autor);
box.Items.Refresh();
}
You can create an ObservableCollection instead of binding to the List. ObservableCollection implements INotifyPropertyChanged so it can send a notification whenever something is changed in the container.
Also, I would suggest you to try
public void RefreshListBox()
{
box.ItemsSource =
(from m in db.a_autor
orderby m.at_id
select m).ToList();
}
and call this after db.SaveChanges()
You should use MVVM pattern instead of code behind and use property changes. First result in Google:
https://www.codeproject.com/Articles/819294/WPF-MVVM-step-by-step-Basics-to-Advance-Level
I hope it helps you.
Juan
I'm trying to get my app bar to appear when I tap the 3 dots at the bottom of the screen, but when I do so it doesn't happen. Anyone know why & how this problem can be rectified?
MainPage.xaml
<Page
x:Name="pageRoot"
x:Class="HP.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Exits_Expert_London_Lite.Lines_and_Stations.WC"
xmlns:common="using:Exits_Expert_London_Lite.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:q42controls="using:Q42.WinRT.Controls"
mc:Ignorable="d">
<Grid Background="Black">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid Name="CustomAppBarRoot" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Loaded="CustomAppBarRoot_OnLoaded"
ManipulationMode="TranslateY"
ManipulationDelta="CustomAppBarRoot_OnManipulationDelta"
ManipulationCompleted="CustomAppBarRoot_OnManipulationCompleted"
Tapped="CustomAppBarRoot_OnTapped">
<Grid.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Grid.RenderTransform>
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="DotsTextBlock" FontSize="28" Text="..." HorizontalAlignment="Right" VerticalAlignment="Top"
Margin="0 0 15 0" Tapped="DotsTextBlock_OnTapped" Width="50" Height="50" TextAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform Y="0" X="11"/>
</TextBlock.RenderTransform>
</TextBlock>
<StackPanel Name="ButtonsStackPanel" Grid.Row="1" Orientation="Horizontal">
<AppBarButton Label="tfg" Icon="Add"/>
<AppBarButton Label="tfg" Icon="Add"/>
</StackPanel>
</Grid>
<Hub>
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="Page name" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Width="800" Padding="40,50,0,0">
<HubSection.Header>
<StackPanel>
<TextBlock Text="hub section 1" Style="{StaticResource HeaderTextBlockStyle}"/>
</StackPanel>
</HubSection.Header>
<DataTemplate>
<Grid>
<StackPanel>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Margin="0,0,0,5" TextWrapping="Wrap">
<Run Text="Hello World"/>
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
MainPage.cs
using HP.Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;
// The Hub Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=321224
namespace HP
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.Tapped += Page_OnTapped;
}
private void Page_OnTapped(object sender, TappedRoutedEventArgs tappedRoutedEventArgs)
{
if ( isAppBarShown )
HideCustomAppBar();
}
#region custom app bar
private Storyboard hideCustomAppBarStoryboard;
private Storyboard showCustomAppBarStoryboard;
private Size appBarSize;
private Size appBarButtonsSize;
private bool isAppBarShown = true;
private void CustomAppBarRoot_OnLoaded(object sender, RoutedEventArgs e)
{
appBarSize = new Size(CustomAppBarRoot.ActualWidth, CustomAppBarRoot.ActualHeight);
appBarButtonsSize = new Size(ButtonsStackPanel.ActualWidth, ButtonsStackPanel.ActualHeight);
InitializeStoryboards();
HideCustomAppBar();
}
private void ShowCustomAppBar()
{
isAppBarShown = true;
showCustomAppBarStoryboard.Begin();
}
private void HideCustomAppBar()
{
isAppBarShown = false;
hideCustomAppBarStoryboard.Begin();
}
private void DotsTextBlock_OnTapped(object sender, TappedRoutedEventArgs e)
{
if (isAppBarShown)
HideCustomAppBar();
else
ShowCustomAppBar();
}
private void InitializeStoryboards()
{
hideCustomAppBarStoryboard = new Storyboard();
showCustomAppBarStoryboard = new Storyboard();
var showDoubleAnimation = new DoubleAnimation()
{
EasingFunction = new CircleEase() {EasingMode = EasingMode.EaseInOut},
To = 0,
Duration = new Duration(TimeSpan.FromMilliseconds(200))
};
var hideDoubleAnimation = new DoubleAnimation()
{
EasingFunction = new CubicEase() {EasingMode = EasingMode.EaseInOut},
To = appBarButtonsSize.Height,
Duration = new Duration(TimeSpan.FromMilliseconds(200))
};
hideCustomAppBarStoryboard.Children.Add(hideDoubleAnimation);
showCustomAppBarStoryboard.Children.Add(showDoubleAnimation);
Storyboard.SetTarget(hideCustomAppBarStoryboard, CustomAppBarRoot);
Storyboard.SetTarget(showCustomAppBarStoryboard, CustomAppBarRoot);
Storyboard.SetTargetProperty(showCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
Storyboard.SetTargetProperty(hideCustomAppBarStoryboard, "(UIElement.RenderTransform).(TranslateTransform.Y)");
}
#endregion
private void CustomAppBarRoot_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var translateTransform = (CustomAppBarRoot.RenderTransform as TranslateTransform);
double newY = e.Delta.Translation.Y + translateTransform.Y;
translateTransform.Y = Math.Max(0, Math.Min(newY, appBarButtonsSize.Height));
}
private void CustomAppBarRoot_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
// if small appbar-position changes are made app bar should back to previous position, just like in windows phone
if (Math.Abs(e.Cumulative.Translation.Y) < 20)
isAppBarShown = !isAppBarShown;
if (!isAppBarShown)
ShowCustomAppBar();
else
HideCustomAppBar();
}
private void CustomAppBarRoot_OnTapped(object sender, TappedRoutedEventArgs e)
{
e.Handled = true; // prevents raising Page.Tapped event so appbar won't be closed on AppBar-area tap
}
}
}
Move your CustomAppBarRoot Grid after the Hub control so it renders on top. As is, the Hub control covers the CustomAppBarRoot so clicks on the ellipses go to the Hub not to the DotsTextBlock. If you give the Hub a background colour for testing this is quite obvious (leave the Background off for production):
<Hub Background="Magenta">
You could also raise the CustomAppBarRoot in the Z-order by applying the Canvas.ZIndex property; however, since your CustomAppBarRoot isn't in a Canvas this is an off-label use so I'd prefer placing the CustomAppBarRoot after the Hub in the Xaml:
<Grid Name="CustomAppBarRoot" Canvas.ZIndex="100" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Loaded="CustomAppBarRoot_OnLoaded"
There is a Segoe UI Symbol for the "More" ellipses at Unicode 0xe10c that you might use rather than using a string of periods:
<TextBlock Name="DotsTextBlock" Text="" FontSize="14" FontFamily="Segoe UI Symbol" HorizontalAlignment="Right" VerticalAlignment="Top"
Margin="0 0 15 0" Tapped="DotsTextBlock_OnTapped" Width="50" Height="50" TextAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform Y="0" X="11"/>
</TextBlock.RenderTransform>
</TextBlock>
For a WinRT App, I have a GridView where items are grouped so that each group contains a header and his group element.
I want a button in the app bar, to pass all the item in my gridView to the selected state (with the purple border and the checkbox , like when I right click on an item).
I try to add each item to the SelectedItems list of my GridView but it doesn't do anything.
private void FavoriButton_Click_1(object sender, RoutedEventArgs e)
{
foreach (Categorie cat in coll)
itemGridView.SelectedItems.Add(cat);
}
Does anyone know how I can put all my items of a grid view to the selectedState (with the purple border and checkbox) ?
Here is the code
public sealed partial class HomePage : LayoutAwarePage
{
ObservableCollection<Categorie> coll = new ObservableCollection<Categorie>();
public HomePage()
{
this.InitializeComponent();
cvs1.Source = coll;
(itemGridView as ListViewBase).ItemsSource = this.cvs1.View.CollectionGroups;
}
async private void FillPage()
{
var categories = App.api.Categories_Get();
if (categories == null || categories.Count == 0)
return;
for (var i = 0; i < categories.Count; i++)
coll.Insert(i, categories[i]);
}
private void FavoriButton_Click_1(object sender, RoutedEventArgs e)
{
foreach (Categorie cat in coll)
{
itemGridView.SelectedItems.Add(cat);
}
}
et le XAML
<common:LayoutAwarePage
x:Class="NMA.Pages.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NMA"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:common="using:NMA.Common"
mc:Ignorable="d">
<common:LayoutAwarePage.Resources>
<CollectionViewSource x:Name="cvs1" ItemsPath="listArt" IsSourceGrouped="True" />
<DataTemplate x:Key="Standard250x250ItemTemplatePerso">
<Grid HorizontalAlignment="Left" Width="270" Height="210" VariableSizedWrapGrid.ColumnSpan="1" VariableSizedWrapGrid.RowSpan="1" local:Tilt.IsTiltEnabled="False" >
<Image Width="270" Height="210" Source="{Binding ImgArt}" CacheMode="BitmapCache" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</common:LayoutAwarePage.Resources>
<Grid Background="Transparent" x:Name="MyGrid">
<Grid x:Name="NormalGrid">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<local:VariableGridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items"
Grid.RowSpan="2"
Padding="120,130,120,74"
ItemsSource="{Binding Source={StaticResource cvs1}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplatePerso}"
IsSwipeEnabled="False"
IsItemClickEnabled="True"
Background="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="Multiple">
<local:VariableGridView.ItemsPanel >
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Background="Transparent" local:Tilt.IsTiltEnabled="False" Margin="0,0,100,0" />
</ItemsPanelTemplate>
</local:VariableGridView.ItemsPanel>
<local:VariableGridView.GroupStyle>
<GroupStyle >
<GroupStyle.HeaderTemplate>
<DataTemplate x:Name="MyDataTemplate">
<Button x:Name="HeaderButton" AutomationProperties.Name="MyHeaderButton" Click="HeaderButton_Click_1" Style="{StaticResource ButtonHeader_Style}" Content="{Binding NomCat}" FontSize="26" FontFamily="{StaticResource SegoeWPLight}" Margin="-24,0,0,20" Width="900" Background="Transparent">
</Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="270" ItemHeight="210" Orientation="Vertical" Margin="0,0,-30,0" MaximumRowsOrColumns="4" Background="Transparent" Width="900">
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:VariableGridView.GroupStyle>
</local:VariableGridView>
</Grid>
</common:LayoutAwarePage>
Thanks a lot
I actually found it, I was trying hard to go across the visual Tree while it was simple with the ItemContainerGenerator.
private void FavoriButton_Click_1(object sender, RoutedEventArgs e)
{
for( var i = 0 ; i<itemGridView.Items.Count ; i++)
{
(itemGridView.ItemContainerGenerator.ContainerFromIndex(i) as GridViewItem).IsSelected = true;
}
}
Quite easy after all.
I have seen may examples one of them been
Add WPF control at runtime
Seem this solution has work for a lot of people. What the hell am I doing wrong? My Label won't Show on the canvas.
Label l = new Label();
l.Background = new LinearGradientBrush(Colors.Black, Colors.Black, 0);
canBackArea.Children.Add(l);
l.Visibility = System.Windows.Visibility.Visible;
l.Content = "Hello";
Canvas.SetLeft(l,20);
Canvas.SetTop(l, 20);
Canvas.SetZIndex(l, lableList.Count);
Canvas Has a white color, Thus the Background.
canBackArea is a Canvas
XML CODE
<ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Visible">
<Canvas Name="canBackArea"
Width="500"
Height="300"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="White"
MouseMove="canBackArea_MouseMove">
<telerik:RadContextMenu.ContextMenu>
<telerik:RadContextMenu Name="mnuBack"
ItemClick="ContextMenu_ItemClick"
Opened="mnuBack_Opened">
<telerik:RadMenuItem Name="mBackground" Header="Set Background Image" />
<telerik:RadMenuItem Name="mSize" Header="Set Size" />
<telerik:RadMenuItem Name="mLable" Header="Add Text" />
<telerik:RadMenuItem Name="mChangeText" Header="Change Text" />
</telerik:RadContextMenu>
</telerik:RadContextMenu.ContextMenu>
<Image Name="imgBackground" />
</Canvas>
</ScrollViewer>
After Add a lot of labels.
This is my MainWindow.xaml
<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="350" Width="525">
<Canvas x:Name="canBackArea">
</Canvas>
and this is my codebehind.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Label l = new Label();
canBackArea.Children.Add(l);
l.Visibility = System.Windows.Visibility.Visible;
l.Content = "Hello";
Canvas.SetLeft(l, 20);
Canvas.SetTop(l, 20);
}
This works perfectly fine.
http://i.imgur.com/JooqS.png
It could depend on the context your using it in?
I have tried to reproduce your issue and I suspect the possible issues should be that
No Foreground color is set to Label controls.
zIndex should be more than any other children controls I think as Canvas.SetZIndex(l, canBackArea.Children.Count);
Below is what I have tried and tested.
XAML Code
<Window x:Class="TestApplication.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" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="269*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="New Label Content" Height="30" />
<TextBox x:Name="txtLabelContent" Width="200" Height="30"></TextBox>
<Button Margin="10 0 0 0" Height="30" Width="70" Click="Button_Click">Add Label</Button>
</StackPanel>
<Canvas Grid.Row="1" x:Name="canBackArea" Background="White" Grid.RowSpan="2">
</Canvas>
</Grid>
</Window>
Window code-behind
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace TestApplication
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Label l = new Label();
l.Background = new LinearGradientBrush(Colors.Black, Colors.Black, 0);
l.Foreground = new LinearGradientBrush(Colors.White, Colors.White, 0);
canBackArea.Children.Add(l);
l.Visibility = System.Windows.Visibility.Visible;
l.Content = txtLabelContent.Text;
Canvas.SetLeft(l, 20);
Canvas.SetTop(l, 20);
Canvas.SetZIndex(l, canBackArea.Children.Count);
}
}
}
using your xaml and this
private void mnuBack_ItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
Label l = new Label();
canBackArea.Children.Add(l);
l.Visibility = System.Windows.Visibility.Visible;
l.Content = "Hello";
Canvas.SetLeft(l, 20);
Canvas.SetTop(l, 20);
Canvas.SetZIndex(l, lableList.Count);
lableList.Add(l);
}
I can add labels
The Problem was i was using styles and it is some how over writing my lable, i replaced it with textbox and every thing seems fine....