Develop Reference

Add Button to ForEach loop

I have a foreach loop that lists a bunch of websites. I would like the ability to add a button to next to each of these websites.
e.g.
google.com X //X represents button
facebook.com X
I don't think adding a stackpanel is the way to go as I want to add it next to the textblock being created in this for loop.
public void WebsiteList(string[] blocked_sites)
{
Button removewebsite = new Button();
numofsites = blocked_sites.Length;
website.Margin = new Thickness(57, 75, 10, 20);
website.Width = 300;
removewebsite.Width = 20;
removewebsite.Height = 20;
removewebsite.Foreground = Brushes.Red;
removewebsite.Content = "X";
removewebsite.Background = Brushes.Transparent;
website.Foreground = Brushes.White;
website.TextWrapping = TextWrapping.Wrap;
website.FontSize = 13;
foreach (string Site in blocked_sites)
{
website.Inlines.Add(new Run("• "));
string editedSite = Site.Replace("*://*.", "").Replace("*://*", "").Replace("*://", "").Replace("/*", "");
website.Inlines.Add(new Run(editedSite));
website.Inlines.Add(new LineBreak());
removewebsite.Name = "test";
//HERE IS WHERE I WANT TO ADD THE BUTTON ON THE END
}
}
I've tried adding a stackpanel using stackpanel.children.Add(removewebsite) but it's not lining up with the textblocks. I think I'm just lacking sufficient knowledge in the most suitable way to go about it, would love to be pointed in the right direction.

Use an ItemsControl and set or bind its ItemsSource property to the modified string[]:
public void WebsiteList(string[] blocked_sites)
{
numofsites = blocked_sites.Length;
string[] s = new string[numofsites];
for (int i = 0; i < numofsites; ++i)
{
s[i] = string.Format("• {0}{1}", blocked_sites[i].Replace("*://*.", "").Replace("*://*", "").Replace("*://", "").Replace("/*", ""),
Environment.NewLine);
}
ic.ItemsSource = s;
}
XAML:
<ItemsControl x:Name="ic">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Foreground="White" TextWrapping="Wrap" FontSize="13" Margin="57, 75, 10, 20" Width="300" />
<Button Content="X" Foreground="Red" Width="20" Height="30" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Need to draw rectangles on top of image in FlipView, but FlipView loads 3 images at a time

I have a collection of images i want to show with FlipView. On each image I want to draw multiple rectangles, but to do this I need the current dimensions for the image after it has been rendered. I have the coordinates for the rectangles in the same list as my images. I get the dimensions from the images via ImageOpened event, but the problem is the FlipView event loads three images at the same time causing the different rectangles all to be drawn on the first image. Any suggestions?
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
itemList = e.Parameter as List<TableData>;
foreach (var blobImage in itemList)
{
var request = (HttpWebRequest)WebRequest.Create($"http://localhost:58941/api/image?id={blobImage.ImageBlobName}");
request.Method = "GET";
request.ContentType = "application/json";
WebResponse response = await request.GetResponseAsync();
if (response != null)
{
string responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();
var myDict = JsonConvert.DeserializeObject<BlobImage>(responseString);
var jj = new MyImage(blobImage.ImageDescription, myDict.Uri, blobImage.GpsLatitude, blobImage.GpsLongitude, blobImage.GpsAltitude, blobImage.DateTime, blobImage.ObjectsDetected);
MyImages.Add(jj);
}
}
MyFlipView.ItemsSource = MyImages;
}
private void Image_ImageOpened(object sender, RoutedEventArgs e)
{
Image currentImageDimensions = sender as Image;
currentWidth = currentImageDimensions.ActualWidth;
currentHeight = currentImageDimensions.ActualHeight;
foreach (var imageRectangle in itemList)
{
for (int i = 0; i < imageRectangle.ObjectsDetected.Count; i++)
{
rectangle = new Rectangle();
var xMinConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].xMin);
var yMinConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].yMin);
var xMaxConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].xMax);
var yMaxConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].yMax);
var xMin = xMinConvert * currentWidth;
var yMin = yMinConvert * currentHeight;
var xMax = xMaxConvert * currentWidth;
var yMax = yMaxConvert * currentHeight;
rectangle.Height = yMax - yMin;
rectangle.Width = xMax - xMin;
var left = ((bgWidth - currentWidth) / 2) + xMin;
var top = ((bgHeight - currentHeight) / 2) + yMin;
rectangle.Margin = new Thickness(left, top, 0, 0);
rectangle.Stroke = new SolidColorBrush(Windows.UI.Colors.Red);
rectangle.StrokeThickness = 1;
layoutRoot.Children.Add(rectangle);
}
}
}
Xaml:
<ScrollViewer DoubleTapped="scrollViewer_DoubleTapped" MinZoomFactor="1" ZoomMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="cGrid" Width="{Binding ElementName=gridbg, Path=ActualWidth}" Height="{Binding ElementName=gridbg, Path=ActualHeight}">
<FlipView SelectionChanged="MyFlipView_SelectionChanged" Name="MyFlipView" Width="{Binding ElementName=gridbg, Path=ActualWidth}" Height="{Binding ElementName=gridbg, Path=ActualHeight}">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="local:MyImage">
<Image Source="{Binding Image}" Stretch="Uniform" Height="{Binding ElementName=gridbg, Path=ActualHeight}" ImageOpened="Image_ImageOpened" />
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Border>
<Canvas x:Name="layoutRoot">
</Canvas>
</Grid>
</ScrollViewer>

but FlipView loads 3 images at a time
FlipView control supports virtualization at default, load three items at one time is as expected. If disabled the virtualization, all the items will be loaded into the FlipView at one time.
You have several ways to resolve your issue. Since you only need the Rectangle drawing when one FlipViewItem selected, you could put the drawing relative code snippet inside SelectionChanged event handle of FlipView. By doing this you may encounter the issue for getting the Image height and width. Actually you should be able to know the image metadata by getting StorageFile object from uri of the image. If you just want to get the Image control for getting the Height and Width, you may use VisualTreeHelper to get the Image control from FlipView.
Or you could consider to force load only one item to the FlipView each time. For this you could use ISupportIncrementalLoading for incremental loading.
I'm not sure what you are drawing these rectangles for, consider to draw these rectangles to the image before you binding the images to the FlipView if possible.

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.

Select ImageBrush using VisualTreeHelper

I am trying to select ImageBrush items from a LongListSelector. As the ImageBrushes are inside a DataTemplate, I am selecting them using VisualTreeHelper.
My sample xaml code:
<phone:LongListSelector Grid.Row="0" Name="AllPhotosListBox"
SelectionChanged="AllPhotosListBox_SelectionChanged"
ItemsSource="{Binding PhotoItems}"
LayoutMode="Grid" GridCellSize="112, 112">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Margin="24,12,-12,0" Grid.Row="2" BorderThickness="1" BorderBrush="Gray" >
<Grid toolkit:TiltEffect.IsTiltEnabled="True">
<Grid.Background>
<ImageBrush ImageSource="{Binding ImageUrlLow}" Stretch="UniformToFill" />
</Grid.Background>
</Grid>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
My sample c# code for selecting ImageBrushes is:
for (int i = 0; i < AllPhotosListBox.ItemsSource.Count; i++)
{
AllPhotosListBox.UpdateLayout();
AllPhotosListBox.ScrollTo(AllPhotosListBox.ItemsSource[i]);
LongListSelector longListBoxItem = AllPhotosListBox as LongListSelector;
longListBoxItem.UpdateLayout();
var grid = VisualTreeHelper.GetChild(longListBoxItem, 0);
var grid1 = VisualTreeHelper.GetChild(grid, 0);
var viewportControl = VisualTreeHelper.GetChild(grid1, 0) as ViewportControl;
var contentPresenter1 = VisualTreeHelper.GetChild(viewportControl, 0) as ContentPresenter;
var canvas1 = VisualTreeHelper.GetChild(contentPresenter1, 0);
var canvas2 = VisualTreeHelper.GetChild(canvas1, 0);
var ContentPresenter2 = VisualTreeHelper.GetChild(canvas2, 0);
var border = VisualTreeHelper.GetChild(ContentPresenter2, 0);
var grid2 = VisualTreeHelper.GetChild(border, 0) as Grid;
ImageSource imgSource = (grid2.Background as ImageBrush).ImageSource;
// doing other stuffs here...
}
But here I am not getting all the imagebrushes. Let, I have ten imagebrushes. But I am getting only two(most of the time the first and the last) imagebrushes which have sources and rest others' sources are empty.
Is there any wrong in my selection. Need help...

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