How to give a new location to a button in c#? - c#

private void Hangman_OnLoaded()
{
const int btnSize = 25;
for (var i = 65; i <= 90; i++)
{
var btn = new Button { Content = (char)i };
btn.Width = btn.Height = btnSize;
var margin = btn.Margin;
margin.Left += btnSize + 100;
btn.Margin = margin;
GridMain.Children.Add(btn);
}
}
So, I have this code block and i want to create alphabet with ASCII. I have a Grid named GridMain. I want to display A-Z. When I debug, I see that buttons are created in one nest. What should I use to display these letters next to each other?

Since these are buttons, that has single character ( atleast based on your question ), The size of the items will always be the same. So i would suggest you to use GridView with DataTemplate to load ASCII Characters as Buttons.
change your Hangman_OnLoaded to below.
private void Hangman_OnLoaded()
{
List<char> bindingData = new List<char>();
for (var i = 65; i <= 90; i++)
{
bindingData.Add((char)i);
}
variableGrid.DataContext = bindingData;
}
Below will be your GridView.
<GridView x:Name="variableGrid" ItemsSource="{Binding }">
<GridView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ''}" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

If you insist on doing everything in code behind for the usual reasons, that would look more like this:
var GridMain = new System.Windows.Controls.Primitives.UniformGrid
{
Name = "GridMain",
Rows = 10,
Columns = 10
};
If for some reason you really want to use Grid, you need to define rows and columns in the Grid and set the row and column values on each Button.
XAML
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<!-- etc. however many rows -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<!-- etc. however many columns -->
</Grid.ColumnDefinitions>
</Grid>
C#:
// Row zero, column zero
Grid.SetRow(btn, 0);
Grid.SetColumn(btn, 0);
Etc.
If this were WPF (it isn't, but maybe somebody doing WPF will click on this some day), your best, simplest solution is to use UniformGrid instead of regular Grid, and set the correct number of rows and columns on it:
<UniformGrid x:Name="GridMain" Rows="10" Columns="10">
</UniformGrid>
VariableSizedWrapGrid might be an acceptable UWP substitute for UniformGrid in your case, but I'm on Win7 here and can't test it.

Related

Draw variable number of rectangles within WPF Grid cells?

I have a WPF Grid which is 3 columns wide and 8 rows:
<Window x:Class="Container.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="700" Width="1000">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
</Grid>
</Window>
I am using this to draw something like this:
Every cell in the first and third columns may have a different number of rectangles. Also, the width of each rectangle may be different and change at run-time. The width will be proportionate to a number (known at run-time and continually-changing).
What is the best way to draw these rectangles?
Here is what I've come up with after about an hour of fiddling (GitHub Repo):
I'm using the MVVM pattern to make the UI as easy as possible. Right now, it just populates with some random data.
The XAML:
<Window
x:Class="BuySellOrders.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:local="clr-namespace:BuySellOrders"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.DataContext>
<local:MainWindowVm />
</Window.DataContext>
<Grid Margin="15">
<ItemsControl ItemsSource="{Binding Path=Prices}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PriceEntryVm}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Padding="5"
HorizontalAlignment="Stretch"
BorderBrush="Black"
BorderThickness="1">
<ItemsControl HorizontalAlignment="Right" ItemsSource="{Binding Path=BuyOrders}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:OrderVm}">
<Border
Width="{Binding Path=Qty}"
Margin="5"
Background="red"
BorderBrush="Black"
BorderThickness="1" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<Border
Grid.Column="1"
BorderBrush="Black"
BorderThickness="1">
<TextBlock
Margin="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Path=Price}" />
</Border>
<Border
Grid.Column="2"
Padding="5"
BorderBrush="Black"
BorderThickness="1">
<ItemsControl ItemsSource="{Binding Path=SellOrders}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:OrderVm}">
<Border
Width="{Binding Path=Qty}"
Margin="5"
Background="red"
BorderBrush="Black"
BorderThickness="1" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
The view models:
class MainWindowVm : ViewModel
{
public MainWindowVm()
{
var rnd = new Random();
Prices = new ObservableCollection<PriceEntryVm>();
for (int i = 0; i < 8; i++)
{
var entry = new PriceEntryVm();
Prices.Add(entry);
entry.BuyOrders.CollectionChanged += OnOrderChanged;
entry.SellOrders.CollectionChanged += OnOrderChanged;
entry.Price = (decimal)110.91 + (decimal)i / 100;
var numBuy = rnd.Next(5);
for (int orderIndex = 0; orderIndex < numBuy; orderIndex++)
{
var order = new OrderVm();
order.Qty = rnd.Next(70) + 5;
entry.BuyOrders.Add(order);
}
var numSell = rnd.Next(5);
for (int orderIOndex = 0; orderIOndex < numSell; orderIOndex++)
{
var order = new OrderVm();
order.Qty = rnd.Next(70) + 5;
entry.SellOrders.Add(order);
}
}
}
private void OnOrderChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
foreach (var item in e.NewItems)
{
var order = item as OrderVm;
if (order.Qty > LargestOrder)
{
LargestOrder = order.Qty;
}
}
}
}
private int _largestOrder;
public int LargestOrder
{
get { return _largestOrder; }
private set { SetValue(ref _largestOrder, value); }
}
public ObservableCollection<PriceEntryVm> Prices { get; }
}
public class PriceEntryVm: ViewModel
{
public PriceEntryVm()
{
BuyOrders = new OrderList(this);
SellOrders = new OrderList(this);
}
private Decimal _price;
public Decimal Price
{
get {return _price;}
set {SetValue(ref _price, value);}
}
public OrderList BuyOrders { get; }
public OrderList SellOrders { get; }
}
public class OrderList : ObservableCollection<OrderVm>
{
public OrderList(PriceEntryVm priceEntry)
{
PriceEntry = priceEntry;
}
public PriceEntryVm PriceEntry { get; }
}
public class OrderVm : ViewModel
{
private int _qty;
public int Qty
{
get { return _qty; }
set { SetValue(ref _qty, value); }
}
}
I had to make some assumptions about the naming of things, but hopefully you should get the basic idea of what's going on.
It's structured as a list of PriceEntry, each of which contains a Price, and a BuyOrders and SellOrders properties.
BuyOrders and SellOrders are just lists of orders that have a Quantity property.
The XAML binds the list of price entries to a template that contains a 3 column grid. The first and 3rd columns of that grid bound to another set of item controls for each list of orders. The template for each order is just a border with a Width bound to the Quantity of the order.
All the binds means that just updating a property, or adding an order to either the buy or sell list of a price entry will automatically propagate to the UI. Adding or removing a PriceEntry will also automatically adjust the UI.
I haven't implemented your automatic scaling yet, but the basic idea would be to use a ValueConverter on the Quantity binding, to make it automatically adjust to the largest order.
As an extra note, it uses this nuget package to provide some of the MVVM boiler-plate code, but you should be able to use anything you want, as long as it gives you INotifyPropertyChanged support.
Here is a bonus screen capture showing the dynamic nature of MVVM updating the UI based on a timer.
This only needed a few lines of code to randomly pick a row, then randomly pick an order on the row, then add or subtract a small random amount from the quantity.
_updateTimer = new DispatcherTimer();
_updateTimer.Tick += OnUpdate;
_updateTimer.Interval = TimeSpan.FromSeconds(0.01);
_updateTimer.Start();
private void OnUpdate(object sender, EventArgs e)
{
var entryIndex = _rnd.Next(Prices.Count);
var entry = Prices[entryIndex];
OrderList list;
list = _rnd.Next(2) == 1 ?
entry.BuyOrders :
entry.SellOrders;
if (list.Any())
{
var order = list[_rnd.Next(list.Count)];
order.Qty += _rnd.Next(0, 8) - 4;
}
}
Right then, here goes....
This is exactly the kind of thing you want to use data-binding for. You can try and do things manually if you like, but your code will quickly become very messy if you do. WPF lets you do things the old-school way (i.e. similar to WinForms et al) but that was really to facilitate porting of legacy code. I won't go into too much detail about MVVM (plenty of info on the net about it), but you can get started by using NuGet to add MVVMLightLibs or some other MVVM framework to your project and then you assign your main window a view model by doing something like this:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
So now it's time for the view model itself, which is a model of the data structures that you want your view to display:
public class MainViewModel : ViewModelBase
{
public ObservableCollection<PriceLevel> PriceLevels { get; } = new ObservableCollection<PriceLevel>
{
new PriceLevel(110.98, new int[]{ }, new int[]{ }),
new PriceLevel(110.97, new int[]{ }, new int[]{ }),
new PriceLevel(110.96, new int[]{ }, new int[]{ }),
new PriceLevel(110.95, new int[]{ }, new int[]{ 5 }),
new PriceLevel(110.94, new int[]{ }, new int[]{ 3, 8 }),
new PriceLevel(110.93, new int[]{ 8, 3, 5, }, new int[]{ }),
new PriceLevel(110.92, new int[]{ 3 }, new int[]{ }),
new PriceLevel(110.91, new int[]{ }, new int[]{ }),
};
}
public class PriceLevel
{
public double Price { get; }
public ObservableCollection<int> BuyOrders { get; }
public ObservableCollection<int> SellOrders { get; }
public PriceLevel(double price, IEnumerable<int> buyOrders, IEnumerable<int> sellOrders)
{
this.Price = price;
this.BuyOrders = new ObservableCollection<int>(buyOrders);
this.SellOrders = new ObservableCollection<int>(sellOrders);
}
}
If you don't already know, ObservableCollection is very similar to list but it propegrates change notification, so when you make your view display the data in it your GUI will update automatically whenever the list changes. This MainViewModel class contains an ObservableCollection of type PriceLevel, and each PriceLevel contains the price and the lists of buy and sell orders. This means you'll be able to add and remove price points, and also add and remove the orders in the price points, and your front-end will reflect those changes.
So on to the front end itself:
<Window.Resources>
<!-- Style to display order list as horizontal list of red rectangles -->
<Style x:Key="OrderListStyle" TargetType="{x:Type ItemsControl}">
<!-- Set ItemsPanel to a horizontal StackPanel -->
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!-- Display each item in the order list as a red rectangle and scale x by 8*size -->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin="5" >
<Rectangle Width="{Binding}" Height="20" Fill="Red">
<Rectangle.LayoutTransform>
<ScaleTransform ScaleX="8" ScaleY="1" />
</Rectangle.LayoutTransform>
</Rectangle>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Style to make Price cells vertically aligned -->
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- This style centers the column's header text -->
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</Window.Resources>
<!-- This datagrid displays the main list of PriceLevels -->
<DataGrid ItemsSource="{Binding PriceLevels}" AutoGenerateColumns="False" IsReadOnly="True"
CanUserAddRows="False" CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False"
CanUserResizeRows="False" CanUserSortColumns="False" RowHeight="30">
<DataGrid.Columns>
<!-- The buy orders column -->
<DataGridTemplateColumn Header="Buy orders" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding BuyOrders}" Style="{StaticResource OrderListStyle}" HorizontalAlignment="Right" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- The price column -->
<DataGridTextColumn Header="Price" Width="Auto" Binding="{Binding Price}" />
<!-- The sell orders column -->
<DataGridTemplateColumn Header="Sell Orders" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding SellOrders}" Style="{StaticResource OrderListStyle}" HorizontalAlignment="Left" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Looks a bit full-on, but if you break it down into sections it's actually pretty straightforward. The main different between this and what you've been trying to do is that I'm using a DataGrid. This is basically a Grid control that's had extra functionality added to make it respond dynamically to data that it's been bound to. It also has a lot of extra stuff we dont' need (editing, column resize/reordering etc) so I've turned all that off. The DataGrid binds to PriceLevels in the view model, so it will display a vertical list showing each one. I've then explicitly declared the 3 columns you're after. The middle one is easy, it's just text, so DataGridTextColumn will, do the job. The other two are horizontal arrays of rectangles, so I've used DataGridTemplateColumn which allows me to customize exactly how they look. This customization is mostly done in the OrderListStyle at the very top of the XAML which sets ItemsPanel to a horizontal StackPanel and sets ItemTemplate to a rectangle. There's also a bit of XAML in there to scale the rectangle by a constant, according to the value of the integer it's displaying in the order list.
Here's the result:
I know the XAML might seem a little full-on, but keep in mind this is now fully data-bound to that view model and it will automatically update in response to changes. This little bit of extra work at the start results in MUCH cleaner update code which is also easier to test and debug.
Hope this is what you're after, if you have any questions let me know and we can take it into chat.
UPDATE: If you want to see the dynamic update in action then add this to your main view model's constructor, it just adds and removes orders randomly:
public MainViewModel()
{
var rng = new Random();
var timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(0.1);
timer.Tick += (s, e) =>
{
var row = this.PriceLevels[rng.Next(this.PriceLevels.Count())]; // get random row
switch (rng.Next(4))
{
case 0: row.BuyOrders.Add(1 + rng.Next(5)); break;
case 1: row.SellOrders.Add(1 + rng.Next(5)); break;
case 2: if (row.BuyOrders.Count() > 0) row.BuyOrders.RemoveAt(rng.Next(row.BuyOrders.Count())); break;
case 3: if (row.SellOrders.Count() > 0) row.SellOrders.RemoveAt(rng.Next(row.SellOrders.Count())); break;
}
};
timer.Start();
}

Windows Phone 8.1 - XAML C# - VisualTreeHelper doesn't find DataTemplate Controls

I'm trying to build an app that displays in a Pivot informations about several products such as their pictures. Each PivotItem is concerning one product and contains (between other controls) another Pivot where I load the pictures of the product in code behind.
Here's the XAML part :
<Page
x:Class="Inventaire.Fenetres.FicheProduit"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Inventaire"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ProductPivotItem">
<Grid x:Name="rootGrid" Loaded="rootGrid_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="productName" Text="{Binding article.name}" FontSize="18"
FontWeight="Bold" HorizontalAlignment="Center" TextWrapping="Wrap"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
<Pivot x:Name="picturesPivot" HorizontalAlignment="Center" Margin="0,5,0,5"
VerticalContentAlignment="Top" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
<!--
Some other controls
-->
</Grid>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Pivot x:Name="productPivot" ItemsSource="{Binding}"
ItemTemplate="{StaticResource ProductPivotItem}" />
</Page>
For the moment I load images in the rootGrid_Loaded event, using VisualTreeHelper to get picturesPivot with a method i found there.
Here's the C# extracts :
private void rootGrid_Loaded(object sender, RoutedEventArgs e)
{
Grid rootGrid = (Grid)sender;
// FindArticle is a method I wrote to get the product (of class Article) concerned by
// the productPivotItem, according to me irrelevant for my problem
Article art = FindArticle(rootGrid);
Pivot picturesPivot = (Pivot)FindChildControl<Pivot>(rootGrid, "picturesPivot");
loadImage(picturesPivot, art);
}
private async void loadImage(Pivot picturesPivot, Article article)
{
for (int i = 0 ; i < article.images.Count ; i++)
{
// ImageProduit is the class gathering infomations I need to build the picture url
// the images property of the Article class is the collection of ImageProduit for the product
// and I use AppelWebService (pattern singleton) to get the image from web
ImageProduit picture = article.images[i];
BitmapImage bmpImage = await AppelWebService.getInstance().loadImage(picture.ToString());
Image img = new Image();
img.Source = bmpImage;
PivotItem pi = new PivotItem();
pi.Content = img;
picturesPivot.Items.Add(pi);
}
}
private DependencyObject FindChildControl<T>(DependencyObject control, string ctrlName)
{
DependencyObject result = null;
bool done = false;
int i = 0;
int childNumber = VisualTreeHelper.GetChildrenCount(control);
while (i < childNumber && !done)
{
DependencyObject child = VisualTreeHelper.GetChild(control, i);
FrameworkElement fe = child as FrameworkElement;
if (fe == null)
{
done = true;
}
else if (child is T && fe.Name == ctrlName)
{
result = child;
done = true;
}
else
{
DependencyObject nextLevel = FindChildControl<T>(child, ctrlName);
if (nextLevel != null)
{
result = nextLevel;
done = true;
}
}
i++;
}
return result;
}
I modified a bit the FindChildControl method in order to have only one return at the end of the method.
Wrote like this I have no problems loading images.
But, sliding on many products, i discover that after around 70 productPivotItem loaded my emulator crash for OutOfMemoryException.
So I want to try to clear picturesPivot.Items when leaving the corresponding productPivotItem to see if it solve the memory problem.
For this I thought use the PivotItemLoaded and PivotItemUnloaded events on productPivot, load images on load and clear the picturesPivot items collection on unload.
Unfortunately I am not able to get back the picturesPivot in these event methods.
Here's what I tried :
private void productPivot_PivotItemLoaded(Pivot sender, PivotItemEventArgs args)
{
// Next three lines independently
args.Item.UpdateLayout();
sender.UpdateLayout();
UpdateLayout();
Pivot picturesPivot = (Pivot)FindChildControl<Pivot>(args.Item, "picturesPivot");
}
Debuging step by step I saw that args.Item has one child, a Grid without name that has himself one child, a ContentPresenter. This ContentPresenter has no child and I can't get any of my controls defined in the DataTemplate.
How could I find them ? I really need you as I had tearing out on this for too long. I hope I was clear enough, the Pivot Inside Pivot thing can be confusing.

Binding Itemscontrol in Listbox

I want to binding my itemscontrol in listbox, but it doesn't work. I want to add some FrameworkElement to Listbox with stack style.
Here is my XAML code:
<ListBox x:Name="listThemes">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<StackPanel Grid.Row="1" >
<ItemsControl Width="Auto"
Height="Auto"
ItemsSource="{Binding ElementName=listThemes, Path=Items}">
</ItemsControl>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I don't know how to binding ItemsControl inside ListBox. I try put out the Binding ElementName of ItemsControl but it's always crashes. If the ElementName is page name, it not work.
Testing Class :
public class Testing
{
public string Title { get; set; }
public ObservableCollection<FrameworkElement> Items { get; set; }
}
C# Code :
observableCollection = new ObservableCollection<FrameworkElement>();
for (int i = 0; i < 3; i++)
{
observableCollection.Add(new Button { Content = i.ToString() });
observableCollection.Add(new Canvas
{
Background = new ImageBrush()
{
ImageSource = new BitmapImage(new Uri(#"Assets/ApplicationIcon.png", UriKind.Relative)),
Stretch = System.Windows.Media.Stretch.Fill
},
Height = 100,
Width = 100
});
}
List<Testing> list = new List<Testing>();
for (int i = 0; i < 3; i++)
{
Testing test = new Testing();
test.Title = "Testing";
test.Items = observableCollection;
list.Add(test);
}
listThemes.ItemsSource = list;
First, it crashes because you bind the same elements on three different item. One framework element can't be attach under two different control. So you should place your ObservableCollection in your List<Testing> creating process.
Second, you should set a DataContext to your listThemes control, so its items can find the right data path to bind and then you could remove the ElementName.
Try these code.
List<Testing> list = new List<Testing>();
for (int i = 0; i < 3; i++)
{
Testing test = new Testing();
test.Title = "Testing";
var observableCollection = new ObservableCollection<FrameworkElement>();
for (int j = 0; i < 3; i++)
{
observableCollection.Add(new Button { Content = j.ToString() });
observableCollection.Add(new Canvas
{
Background = new ImageBrush()
{
ImageSource = new BitmapImage(new Uri(#"Assets/ApplicationIcon.png", UriKind.Relative)),
Stretch = System.Windows.Media.Stretch.Fill
},
Height = 100,
Width = 100
});
}
test.Items = observableCollection;
list.Add(test);
}
listThemes.DataContext = list;
listThemes.ItemsSource = list;
Third, I don't think it is a good way to bind your FrameworkElement directly to an ItemsControl. It just look weird.
Update:
If you want to generate different types of items, you can use DataTemplateSelector. Because you already parse the forum data into different type, so please check this post:
How to Control the DataTemplateSelector in Windows Store Apps
It explains how to use DataTemplateSelector to display different type of data.
Why is your inner collection of type FrameworkElement?
Create a custom type for it and set an ItemTemplate for your inner ItemsControl.
<DataTemplate x:Key=NestedItemsTemplate>
....
</DataTemplate>
<ListBox x:Name="listThemes"
ItemsSource="{Binding TestItems}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<StackPanel Grid.Row="1" >
<ItemsControl
Width="Auto" Height="Auto"
ItemsSource="{Binding ElementName=listThemes, Path=Items}"
ItemTemplate="{StaticResource NestedItemsTemplate}">
</ItemsControl>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>

Window SizeToContent and ListBox sizing

I am trying to figure out how to use a WPF list box in conjunction with a window that has its SizeToContent property set to WidthAndHeight. The MainWindow has a grid with two rows and two columns. In the bottom right quadrant, I have a list box. I want the rest of the controls in the window to control the size of the window, and the list box to simply fill the available space. Currently, the list box is expanding to fit its contents, which causes the entire MainWindow to expand.
Note: I attempted to create a simple example, but want to point out that in my real scenario I'm using MVVM, and the controls that I want to determine the window width/height are bound to properties in a viewmodel that have their values set after the window is loaded.
Edit to add: The list box is bound to its content before the controls that I want to determine size are, and I don't have control over that.
Here is what the MainWindow currently looks like at startup:
Notice the red and blue bars which indicate what I'm not wanting to happen. Content in that area should only be visible by scroll bars.
Here is what I want the MainWindow to look like at startup:
Notice the size of the MainWindow is determined by the text blocks along the top and left sides, and the list box fills the available space and uses scrollbars if necessary.
Here is some sample code...
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" SizeToContent="WidthAndHeight">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="The window should fit to the width of this" FontSize="15"/>
<Canvas Background="Red" Grid.Column="1"/>
</Grid>
<Grid Grid.Row="1" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="The window should fit to the height of this" FontSize="15">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<Canvas Background="Blue" Grid.Row="1"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="1">
<ListBox Name="ListBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var Messages = new ObservableCollection<string>() { "This is a long string to demonstrate that the list box content is determining window width" };
for (int i = 0; i < 16; i++)
Messages.Add("Test" + i);
for (int i = 0; i < 4; i++)
Messages.Add("this text should be visible by vertical scrollbars only");
ListBox1.ItemsSource = Messages;
}
}
Set the list box ItemsSource, and set SizeToContent=Manual after the Window has loaded.
public MainWindow()
{
InitializeComponent();
Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
SizeToContent = SizeToContent.Manual;
var messages = new ObservableCollection<string>
{
"This is a long string to demonstrate that the list" +
" box content is determining window width"
};
for (int i = 0; i < 16; i++)
{
messages.Add("Test" + i);
}
for (int i = 0; i < 4; i++)
{
messages.Add("this text should be visible by vertical scrollbars only");
}
ListBox1.ItemsSource = messages;
}
In this way the main window is initially sized to fit the content (with no data in the listbox), and then the listbox displays its items with scrollbars.

Binding issue ActualWidth on dynamic filled Grid

Consider the following, simple code:
XAML:
<Grid Height="60" Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="162*" />
<ColumnDefinition x:Name="coltest" Width="316*" />
<ColumnDefinition Width="239*" />
</Grid.ColumnDefinitions>
</Grid>
<Label MouseDoubleClick="TextBox_MouseDoubleClick"
Content="{Binding ElementName=coltest, Path=ActualWidth}" Grid.Row="1"/>
The MouseDoubleClick event:
private void TextBox_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
grid.RowDefinitions.Add(new RowDefinition());
for (int i = 0; i < grid.ColumnDefinitions.Count; i++)
{
Random r = new Random();
Label l = new Label { Content = r.Next(10, 1000000000).ToString() };
grid.Children.Add(l);
Grid.SetRow(l, grid.RowDefinitions.Count - 1);
Grid.SetColumn(l, i);
}
}
My label contains the ActualWidth property of the second column via a binding. In Visual Studio I see my label containing the value 316, so the binding works.
Double clicking the label triggers its event and adds an extra row to the grid, all with a random length.
I expect to see a new value at my label, but (the at runtime calculated) 0 does not change!
What am I missing here?
The main problem is that ActualWidth of a ColumnDefinition isn't a Dependency Property, nor does it implement INotifyPropertyChanged so the Binding has no way of knowing that the ActualWidth of coltest has changed.
You'll need to explicitly update the Binding
Edit2: In this case, you might be able to update the Binding in the SizeChanged event for the Grid since the Columns have * width. This won't work 100% with Auto width though since the width will change based on the elements in the ColumnDefinition
<Grid Name="grid"
SizeChanged="grid_SizeChanged">
<!--...-->
</Grid>
Event handler
void grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
BindingExpression be = label.GetBindingExpression(Label.ContentProperty);
be.UpdateTarget();
}
Edit: Made some small changes to the Xaml. This will update the Binding everytime you doubleclick the first Label
<Grid Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="162*" />
<ColumnDefinition x:Name="coltest" Width="316*" />
<ColumnDefinition Width="239*" />
<ColumnDefinition Width="239*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label MouseDoubleClick="TextBox_MouseDoubleClick"
Name="label"
Content="{Binding ElementName=coltest, Path=ActualWidth}" Grid.Row="0"/>
</Grid>
Event handler
private void TextBox_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
grid.RowDefinitions.Add(new RowDefinition());
for (int i = 0; i < grid.ColumnDefinitions.Count; i++)
{
Random r = new Random();
Label l = new Label { Content = r.Next(10, 1000000000).ToString() };
grid.Children.Add(l);
Grid.SetRow(l, grid.RowDefinitions.Count - 1);
Grid.SetColumn(l, i);
}
BindingExpression be = label.GetBindingExpression(Label.ContentProperty);
be.UpdateTarget();
}

Categories

Resources