Develop Reference

How to make ListBox show different Elements (which are in a List) in wpf

Suppose I have a list which contains some elements and texts:
public MainWindow()
{
InitializeComponent();
TextBlock t = new TextBlock();
t.Text = "Hello World!";
Ellipse e = new Ellipse();
e.Width = 100;
e.Height = 100;
e.Fill = new SolidColorBrush(Colors.Yellow);
Rectangle r = new Rectangle();
r.Width = 70;
r.Height = 40;
r.Fill = new SolidColorBrush(Colors.Blue);
List<UIElementItem> items = new List<UIElementItem>();
items.Add(new UIElementItem() { uiElement = t, Text = "This is a TextBlock: " });
items.Add(new UIElementItem() { uiElement = e, Text = "This is an Ellipse: " });
items.Add(new UIElementItem() { uiElement = r, Text = "This is a Rectangle: " });
lbListBox.ItemsSource = items;
}
}
public class UIElementItem
{
public UIElement uiElement { get; set; }
public string Text { get; set; }
}
This is the ListBox in XAML:
<ListBox Name="lbListBox" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,2" Orientation="Horizontal">
<TextBlock Text="{Binding Text}"/>
<??? = "{Binding uiElement}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to make the ListBox show the texts and the elements.
The TextBlock Text="{Binding Text}" will show the text but how to show the element? How to bind?

You could use a ContentPresenter
<ContentPresenter Content="{Binding uiElement}" />
This would show the UI Elements. The complete ItemTemplate would look like
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,2" Orientation="Horizontal">
<TextBlock Text="{Binding Text}"/>
<ContentPresenter Content="{Binding uiElement}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Highlight text richtextblock UWP

I would like to highlight the text while keeping the same formatting: bold, underline, italic ... But I only managed to highlight the text by losing the formatting. Is it correct to get to what I want or is there an alternative way to highlight the text without having to "split" it and then reassemble it?
xaml:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
<RichTextBlock x:Name="RichTextBlockText">
<Paragraph x:Name="Testo">
<Run Foreground="Gray" FontFamily="Segoe UI Light" FontSize="24">
This is a
</Run>
<Run Foreground="Teal" FontFamily="Georgia" FontSize="18" FontStyle="Italic">
different text
</Run>
<Run Foreground="Black" FontFamily="Arial" FontSize="14" FontWeight="Bold">
format
</Run>
</Paragraph>
</RichTextBlock>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,25,0,0">
<TextBox x:Name="txbToFind" Height="32" VerticalAlignment="Bottom" Width="200" HorizontalAlignment="Left"/>
<Button x:Name="btnFind" Content="Find" Click="btnFind_Click" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</StackPanel>
</Grid>
xaml.cs:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void btnFind_Click(object sender, RoutedEventArgs e)
{
string text = string.Empty;
TextBlock NewText = new TextBlock();
string toFind = txbToFind.Text;
for (int a = 0; a <= Testo.Inlines.Count - 1; a++)
{
Run runCorrente = Testo.Inlines[a] as Run;
string currentText;
currentText = runCorrente.Text;
text += currentText;
}
if (text.IndexOf(toFind) >= 0)
{
string[] partOfText = text.Split(new String[] { toFind }, StringSplitOptions.None);
Paragraph paragraph = new Paragraph();
for (int a = 0; a <= partOfText.Length - 1; a++)
{
var piece = partOfText[a];
Run run = new Run();
run.Text = piece;
paragraph.Inlines.Add(run);
if (a < partOfText.Length - 1)
{
MakeHighlightedParagraph(paragraph, toFind, RichTextBlockText);
}
}
RichTextBlockText.Blocks.Clear();
RichTextBlockText.Blocks.Add(paragraph);
}
}
private void MakeHighlightedParagraph(Paragraph paragraph, string textToHighlight, RichTextBlock textBlock)
{
InlineUIContainer cont = new InlineUIContainer();
var border = new Border();
border.MinWidth = textBlock.FontSize / 3.5;
border.Background = new SolidColorBrush(Colors.Yellow);
var text = new TextBlock();
text.Text = textToHighlight;
var margin = textBlock.FontSize * (3.0 / 14.0) + 1.0;
text.Margin = new Thickness(0.0, 0.0, 0.0, -margin);
border.Child = text;
cont.Child = border;
paragraph.Inlines.Add(cont);
}
}
Thanks in advance...!
I have found some possible solutions but I can not use them:
TextRange - that selects a part of text;
TextHighlighter - that highlights one or more text ranges.
But how are they used? Help me please..!

To use TextHighlighters with RichTextBlock, you can first create the desired TextRanges, initialize TextHighlighters using them and then apply them to your RichTextBlock using TextHighlighters property:
TextRange textRange = new TextRange() { StartIndex = 3, Length = 10 };
TextHighlighter highlighter = new TextHighlighter()
{
Background = new SolidColorBrush(Colors.Yellow),
Ranges = { textRange }
};
//add the highlighter
RichBlock.TextHighlighters.Add(highlighter);

There is no a simple property or method being exposed in the RichTextBlock control for your requirement to find the text in the RichTextBlock without losing the formatting, you should set attributes on the every text within the RichTextBlock to make them have the format again. As a simple scenario, you can also just filter the text by a Run object then configure all the text's format.

How to improve speed of adding controls to UI

I have the following code which creates WPF controls and then adds them to a window in a fashion I need. It works decently, but when trying to create 256 (x4 - two textblocks, combo box, textbox) controls it takes a while to display the tab. Window loads fine but I have many tabs and when I click on point setup tab it lags a little before displaying the tab. It only lags the first time I click on the tab, every time after the first it responds immediately.
At first I thought it was a rendering issue, but after much other research I am of the impression C#/WPF doesn't do well with creating a bunch of objects on the fly and adding them to forms.
If I drop the number of items to 50 it responds immediately, 100 is a slight lag and 200 (256) is a little more of a lag and too much to be acceptable to users.
Any experiences with issues like this before and advice for how to fix it or other tips/tricks.
Thanks in advance!
Wesley
public static void pointSetup(VirtualizingStackPanel desc, VirtualizingStackPanel map) //Draws point description and point map table in point setup tab
{
StackPanel row;
TextBlock text;
TextBox textBox;
ComboBox comboBox;
Thickness rowSpacing = new Thickness(0, 0, 0, 5);
Thickness textSpacing = new Thickness(0, 3, 5, 3);
List<string> list = new List<string>();
list.Add("xx");
for (byte i = 0; i < Global.currentZonesToMap; i++)
{
list.Add("Zone " + (i + 1));
}
for (short i = 0; i < 256; i++)
{
//desc
row = new StackPanel();
row.Margin = rowSpacing;
row.Orientation = Orientation.Horizontal;
text = new TextBlock();
text.Text = "Point " + (i + 1);
text.Margin = textSpacing;
text.Width = 50;
textBox = new TextBox();
textBox.MaxLength = 28;
textBox.Text = "";
textBox.Width = 270;
row.Children.Add(text);
row.Children.Add(textBox);
desc.Children.Add(row);
//map
row = new StackPanel();
row.Margin = rowSpacing;
row.Orientation = Orientation.Horizontal;
text = new TextBlock();
text.Text = "Point " + (i + 1);
text.Margin = textSpacing;
text.Width = 50;
comboBox = new ComboBox();
comboBox.ItemsSource = list;
comboBox.Width = 270;
row.Children.Add(text);
row.Children.Add(comboBox);
map.Children.Add(row);
}
}
New Code (using DataTemplate and ItemsControl)
public class DevicePoint
{
public string desc { get; set; }
public int zone { get; set; }
public List<string> zones { get; set; }
}
//Initialized all variables and displays UI (constructor)
public Dispatcher()
{
InitializeComponent();
List<string> opts = new List<string>();
opts.Add("xx");
for (byte i = 0; i < Global.currentZonesToMap; i++)
{
opts.Add("Zone " + (i + 1));
}
List<DevicePoint> points = new List<DevicePoint>();
for (short i = 0; i < 256; i++)
points.Add(new DevicePoint() { desc = "Point " + (i + 1), zone = 0, zones = opts });
pointDesc.ItemsSource = points;
pointZoneMap.ItemsSource = points;
... other stuff here ...
}
<StackPanel>
<TextBlock Margin="10" FontWeight="Bold" HorizontalAlignment="Center" Text="Point Descriptions" />
<ScrollViewer Width="360" Margin="30,10,30,10" MaxHeight="405">
<ItemsControl Name="pointDesc" Margin="5">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,5" Orientation="Horizontal">
<TextBlock Margin="0,3,5,3" Width="50" Text="{Binding desc}" />
<TextBox MaxLength="28" Width="270" Text="{Binding desc}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Margin="10" FontWeight="Bold" HorizontalAlignment="Center" Text="Point - Zone Map" />
<ScrollViewer Width="360" Margin="30,10,30,10" MaxHeight="405">
<ItemsControl Name="pointZoneMap" Margin="5">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,5" Orientation="Horizontal">
<TextBlock Margin="0,3,5,3" Width="50" Text="{Binding desc}" />
<ComboBox Width="270" ItemsSource="{Binding zones}" SelectedIndex="{Binding zone}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>

If your computer have multiple cores, and I am assuming it have, try to perform the for loop in parallel (parallelfor (from .net 4 or above).
You can set the points List size during creation to 256, this will prevent memory allocations during the items adding operation.
Consider use a StringBuilder if Global.currentZonesToMap is large.
Use StringBuilder to build the value for the DevicePoint.desc string property.
Good luck,
M. Moshe

Issues displaying 2 seperate Canvases at the same time in XAML

I have canvas A and canvas B.
Canvas A contains an Image and a grid with diffrent colour squares.
numSelectCan is a diffrent image.
Once i click on a square a event triggers that should set the visibilty state of numSelectCan to visible and then it should show up overlaping Canvas A.
That is not the case. I have tryed everything but i cant get numSelectCan to show up at all.
During development numSelectCan is displayed and works fine. At runtime numSelectCan is just gone. I tryed disabling A but still no success.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,10,10">
<Controls:RoundButton x:Name="btnCancel" PressedBrush="Orange" Foreground="White" BorderBrush="White" ImageSource="/Assets/Appgraphics/Buttons/cancel.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Click="btnCancel_Click"/>
<Controls:RoundButton x:Name="btnQuestion" PressedBrush="Orange" Foreground="White" ImageSource="/Assets/Appgraphics/Buttons/questionmark.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Click="btnQuestion_Click" BorderBrush="White"/>
<Controls:RoundButton x:Name="btnConfirm" PressedBrush="Orange" Foreground="White" BorderBrush="White" ImageSource="/Assets/Appgraphics/Buttons/check.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="confirmSelection"/>
<Canvas x:Name="picCanvas" HorizontalAlignment="Center" Width="582" Height="320">
<Image x:Name="imgBackCC" Height="320" Width="582" Stretch="Fill" HorizontalAlignment="Center" Source="" Margin="0,0,0,0"/>
</Canvas>
<Canvas x:Name="numSelectCan" HorizontalAlignment="Center" Height="155" Visibility="Visible" Width="530" VerticalAlignment="Center">
<Image x:Name="numSelBackground" Source="/Assets/Appgraphics/UserInterface/numFieldBackground.png" Height="155" Width="530" Stretch="Fill"/>
<Image x:Name="numFieldButton1" Source="/Assets/Appgraphics/UserInterface/numField0.png" Width="70" Height="70" Canvas.Left="5" Canvas.Top="5"/>
<Image x:Name="numFieldButton2" Source="/Assets/Appgraphics/UserInterface/numField1.png" Width="70" Height="70" Canvas.Left="80" Canvas.Top="5"/>
<Image x:Name="numFieldButton3" Source="/Assets/Appgraphics/UserInterface/numField2.png" Width="70" Height="70" Canvas.Left="155" Canvas.Top="5"/>
<Image x:Name="numFieldButton4" Source="/Assets/Appgraphics/UserInterface/numField3.png" Width="70" Height="70" Canvas.Left="230" Canvas.Top="5"/>
<Image x:Name="numFieldButton5" Source="/Assets/Appgraphics/UserInterface/numField4.png" Width="70" Height="70" Canvas.Left="305" Canvas.Top="5"/>
<Image x:Name="numFieldButton6" Source="/Assets/Appgraphics/UserInterface/numField5.png" Width="70" Height="70" Canvas.Top="80" Canvas.Left="5"/>
<Image x:Name="numFieldButton7" Source="/Assets/Appgraphics/UserInterface/numField6.png" Width="70" Height="70" Canvas.Left="80" Canvas.Top="80"/>
<Image x:Name="numFieldButton8" Source="/Assets/Appgraphics/UserInterface/numField7.png" Width="70" Height="70" Canvas.Left="155" Canvas.Top="80"/>
<Image x:Name="numFieldButton9" Source="/Assets/Appgraphics/UserInterface/numField8.png" Width="70" Height="70" Canvas.Left="230" Canvas.Top="80"/>
<Image x:Name="numFieldButton10" Source="/Assets/Appgraphics/UserInterface/numField9.png" Width="70" Height="70" Canvas.Left="305" Canvas.Top="80"/>
<Image x:Name="numFieldDelButton" Source="/Assets/appgraphics/UserInterface/numFieldDelete.png" Width="145" Height="145" Canvas.Top="5" Canvas.Left="380" />
</Canvas>
</Grid>
</Grid>
Not sure what is going wrong here, or if im missing a simple thing like setting the display order for the diffrent canvases
Any Ideas/Advice is appreciated.
Update
I added the entire content panel from my xaml.
heres the function that creates the grid for me when the page is initialized
public void createGrid()
{
//create the grid
Grid backGrid = new Grid();
backGrid.Width = 530;
backGrid.Height = 285;
backGrid.HorizontalAlignment = HorizontalAlignment.Center;
backGrid.VerticalAlignment = VerticalAlignment.Center;
backGrid.ShowGridLines = false;
backGrid.Margin = new Thickness(25, 15, 0, 0);
//define columns
for (int c = 0; c < 10; c++)
{
ColumnDefinition colDef = new ColumnDefinition();
backGrid.ColumnDefinitions.Add(colDef);
}
//define rows
for (int r = 0; r < 6; r++)
{
RowDefinition rowDef = new RowDefinition();
backGrid.RowDefinitions.Add(rowDef);
}
//colour counter
int counter = 0;
//create textboxes
for (int r = 0; r < 6; r++)
{
for (int c = 0; c < 10; c++)
{
//set the coulour of the canvases based on the counter
if (counter == 4)
{
counter = 0;
}
SolidColorBrush tempBrush = new SolidColorBrush();
switch (counter)
{
case 0:
tempBrush = new SolidColorBrush(Colors.Red);
break;
case 1:
tempBrush = new SolidColorBrush(Colors.Orange);
break;
case 2:
tempBrush = new SolidColorBrush(Colors.Blue);
break;
case 3:
tempBrush = new SolidColorBrush(Colors.Green);
break;
}
string canName = c.ToString() + r.ToString();
string txtName = "text" + c.ToString() + r.ToString();
string tempCanName = "canvas" + c.ToString() + r.ToString();
//creating the canvas
Canvas tempCanvas = new Canvas();
tempCanvas.Name = tempCanName;
tempCanvas.Background = tempBrush;
tempCanvas.HorizontalAlignment = HorizontalAlignment.Stretch;
tempCanvas.VerticalAlignment = VerticalAlignment.Stretch;
tempCanvas.Margin = new Thickness(2);
//creating the textblock
TextBlock tempName = new TextBlock();
tempName.Width = 32;
tempName.Height = 32;
tempName.Name = txtName;
tempName.Foreground = new SolidColorBrush(Colors.White);
tempName.TextAlignment = TextAlignment.Center;
tempName.Margin = new Thickness(13, 0, 0, 0);
tempName.FontWeight = FontWeights.Bold;
tempName.HorizontalAlignment = HorizontalAlignment.Center;
tempName.VerticalAlignment = VerticalAlignment.Center;
tempName.Visibility = Visibility.Visible;
tempName.FontSize = 30;
tempName.Tap += tempName_Tap;
//adding the canvas to the grid
Grid.SetRow(tempCanvas, r);
Grid.SetColumn(tempCanvas, c);
//adding all items into the canvas and into the grid
tempCanvas.Children.Add(tempName);
backGrid.Children.Add(tempCanvas);
//increment counter
counter++;
}
}
//add the grid into the mainpage
picCanvas.Children.Add(backGrid);
}
All of this works. I get the grid with all the diffrent colour squares, but when I press textblock, I want my 2nd canvas to pop up and that does not happen. I added breakpoints through out and it goes through all of them, i just dont see the second canvas
heres the code for capturing the tap on the textblock
//function that handels the event when a textblock is tapped
private void tempName_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//create a copy of the object that triggerd this event
TextBlock tempBlock = sender as TextBlock;
//create a string from the name of this textblock and then cut of the textpart from the name
string tempName = tempBlock.Name;
tempName = tempName.Substring(4);
//move the canvas top or bottom based on which row the current selection is in
string currentRow = tempName.Substring(1);
if ((currentRow == "0") || (currentRow == "1") || (currentRow == "2"))
{
numSelectCan.VerticalAlignment = VerticalAlignment.Top;
}
else
{
numSelectCan.VerticalAlignment = VerticalAlignment.Bottom;
}
//show the number selector control
numSelectCan.Visibility = Visibility.Visible;
}
I am still stuck on this. Cant get numSelectCan to show up...

hello I have tried your code and what i found is that your question is little bit confusing so i assume that you want your second canvas to be visible on tap on the textblock. but you have not register any event-handler on tap on textblock so no event fired that's why first make your textblock visible and add a tap event handler on which you can set the visibility of second canvas.
also tempName_Tap eventHandler is you color gridbox eventhandler not a textblock tap eventhandler so it never register you tap on text block.
Also in the beginning you write that you want your second canvas to be visible on tap on the grid box for that your code is working fine.

I took your xaml/code and tested it out with my own images. Without the images (or entire project) to see how they are drawing on the canvas, I have to say there is a chance that you don't have the correct Z-Index for your 2 canvases. They normally are layered one on top of the other not shifted off to one side. You can set which Canvas is on top of the other by setting the SetZIndex. Try calling:
//show the number selector control
numSelectCan.Visibility = Visibility.Visible;
Canvas.SetZIndex(numSelectCan, 5);
and to hide it again:
//Hide the number selector control
numSelectCan.Visibility = Visibility.Hidden;
Canvas.SetZIndex(numSelectCan, -5);
Of course the Hidden and changing the ZIndex order might be a little redundant. But I have had trouble with one of the canvases taking the events instead of the one that is displayed so I do both.

Set Height of First ListBoxItem as difference of the other Items in WP7

i need to show a list of item in a ListBox from the bottom in WP7.
So in case i have some items that the height sum of them is < of ListBox Height i need to have a blank item at the top with the difference of the Height.
I have to do this because i set the ItemSource of Listbox, so i cannot know what is the right height of all items before load them.
In Item_loaded event of every Item i save the height and at the last i need to set the Height of the First.
<ListBox x:Name="ConvListBox" Margin="0,0,-12,0" >
<ListBox.ItemTemplate >
<DataTemplate >
<Grid>
<StackPanel Name="BaloonMessage" Margin="3,0,0,0" Loaded="Baloon_Loaded" Tag="{Binding IsSentMsg}" >
<TextBlock Name="SMSText" Text="{Binding SMSText}" Margin="7,3,8,35" TextWrapping="Wrap" Height="Auto" Width="Auto" FontSize="22" Foreground="White"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I set the ItemsSource and add a blank item at top, and a blank at bottom:
ObservableCollection<ClassMessaggio> messaggi =
new ConversazioneViewModel(MessaggioConversazione).Conversazione;
ClassMessaggio FirstLineScrollMessage = new ClassMessaggio();
FirstLineScrollMessage.IsSentMsg = "3";
messaggi.Insert(0, FirstLineScrollMessage);
ClassMessaggio LastLineScrollMessage = new ClassMessaggio();
LastLineScrollMessage.IsSentMsg = "2";
messaggi.Insert(messaggi.Count, LastLineScrollMessage);
this.ConvListBox.ItemsSource = messaggi;
And at Item_Loaded i'm trying this:
var Panel = (StackPanel) sender;
if (Panel != null)
{
Grid grid = (Grid)Panel.Parent;
Border baloon = (Border)Panel.FindName("Baloon");
baloon.Width = grid.Width - 100;
if (Panel.Tag.ToString() == "3")
{
TotalBaloonsHeight = 0;
baloon.Background = grid.Background;
baloon.Name = "FirstScrollBaloon";
}
else if (Panel.Tag.ToString() == "2")
{
baloon.Height = 2;
Panel.Height = 2;
grid.Height = 2;
Border FirstBaloon = (Border)ConvListBox.FindName("FirstScrollBaloon");
if (FirstBaloon != null)
{
FirstBaloon.Height = ConvListBox.Height - TotalBaloonsHeight;
}
}
else
{
TotalBaloonsHeight = TotalBaloonsHeight + baloon.Height;
}
}
My problem is that this line return me always null :(
Border FirstBaloon = (Border)ConvListBox.FindName("FirstScrollBaloon");
I hope is clear, sorry for my english.
EDIT::
Ok this should work:
var Baloons = LayoutRoot.GetVisualDescendants().OfType<Border>();
foreach (var FirstBaloon in Baloons)
{
if (FirstBaloon != null)
{
if (FirstBaloon.Name == "FirstScrollBaloon")
{
FirstBaloon.Height = ConvListBox.ActualHeight - TotalBaloonsHeight;
break;
}
}
}

You can get to the first ListBoxItem using this code:
ListBoxItem item0 = ConvListBox.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem;
From there you can modify it's Height, etc.
Thanks,
Stefan Wick - Microsoft Silverlight