I've got a UserControl which has a grid, whose specification is as follows:
<Grid Name="fieldsGrid" Margin="15,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
The second column is the one of interest. It displays a checkbox, whose text is contained in a TextBlock and appears as "Text..." if it is too long. This is accomplished through code-behind (I have my reasons) like so:
CheckBox currentCheckbox = new CheckBox();
TextBlock block = new TextBlock();
block.MaxWidth = 100;
block.Text = text;
block.TextWrapping = TextWrapping.NoWrap;
block.TextTrimming = TextTrimming.WordEllipsis;
currentCheckbox.Content = block;
currentCheckbox.ToolTip = metaText;
currentCheckbox.SetValue(Grid.RowProperty, rowNumber);
currentCheckbox.SetValue(Grid.ColumnProperty, 1);
currentCheckbox.Margin = new Thickness(0, 10, 10, 0);
currentCheckbox.VerticalAlignment = VerticalAlignment.Center;
fieldsGrid.Children.Add(currentCheckbox);
The problem is that I want to expand this checkbox as the UserControl is resized, thus showing more text as the size increases. How can this be accomplished?
Why don't you try this and thus remove code-behind?
<Grid Name="fieldsGrid"
Margin="15,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="1"
Margin="0 10 10 0">
<CheckBox.Content>
<!-- Make a binding for the Text of TextBlock below -->
<TextBlock MaxWidth="{Binding ActualWidth,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type CheckBox}}}"
Text="Some Text LOng FFFFFFF DDDDDDDDDDDD"
TextTrimming="WordEllipsis"
TextWrapping="NoWrap" />
</CheckBox.Content>
</CheckBox>
</Grid>
That should give you the behavior your looking for and does everything your code-behind does(You need to sort the binding for text to the TextBlock ofc)
On OP's particular request (Code-Behind to be avoided if it can be):
Can add with the code-behind you got (at the end)
currentCheckbox.SizeChanged += (sender, args) => block.MaxWidth = args.NewSize.Width; // Subtract the checkbox indicator width from args.NewSize.Width here for accurate TextBlock Width measurement
Video Link
This appeared to work for me. I used XAML just to define the CheckBox and the TextBlock containing it's label content, like this:
<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="603.433" Width="730.97">
<Grid Name="fieldsGrid"
Margin="15,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Column 1"></TextBlock>
<TextBlock Grid.Column="2" Text="Column 3, a bit bigger"></TextBlock>
<TextBlock Grid.Column="3" Text="0" x:Name="txtWidth"></TextBlock>
<TextBlock Grid.Column="4" Text="Column 5, really really really big"></TextBlock>
<CheckBox Grid.Column="1" x:Name="testChk"
Margin="0 10 10 0">
<CheckBox.Content>
<TextBlock x:Name="txtForCheckBox"></TextBlock>
</CheckBox.Content>
</CheckBox>
</Grid>
</Window>
And then code-behind looks like this:
public MainWindow()
{
InitializeComponent();
testChk.SizeChanged += testChk_SizeChanged;
txtForCheckBox.Text = "Some text, test, test, test.";
txtForCheckBox.TextTrimming = TextTrimming.WordEllipsis;
txtForCheckBox.TextWrapping = TextWrapping.NoWrap;
}
void testChk_SizeChanged(object sender, SizeChangedEventArgs e)
{
txtForCheckBox.MaxWidth = testChk.ActualWidth;
txtWidth.Text = testChk.ActualWidth.ToString();
}
Hope that helps...
Related
I am trying to create columns that can be resized by the user during runtime just like in excel. However, I am creating fields dynamically and don't know how to bind the programmatically created column's width to the width of my column created in xaml.
Question: How can I bind column width programmatically rather than in the XAML?
cs:
public sealed partial class WepPage : Page
{
static int i = 0;
Grid grid;
public WepPage()
{
this.InitializeComponent();
}
private void AddWepButton_Click(object sender, RoutedEventArgs e)
{
addWepStack();
}
private void addWepStack()
{
grid = new Grid();
grid.Name = ("ItemGrid" + i.ToString());
WepStackPanel.Children.Add(grid);
//create columns
ColumnDefinition col0 = new ColumnDefinition();
ColumnDefinition col1 = new ColumnDefinition();
ColumnDefinition col2 = new ColumnDefinition();
ColumnDefinition col3 = new ColumnDefinition();
ColumnDefinition col4 = new ColumnDefinition();
ColumnDefinition col5 = new ColumnDefinition();
// Set the width of each column
//HERE IS WHERE I WANT TO BIND THE COLUMN WIDTH TO THE WIDTH OF THE HEADERS
//SO THE USERS CAN CHANGE THE COLUMN WIDTH WHILE THE APPLICATION IS RUNNING.
// Add columns to grid
grid.ColumnDefinitions.Add(col0);
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);
grid.ColumnDefinitions.Add(col3);
grid.ColumnDefinitions.Add(col4);
grid.ColumnDefinitions.Add(col5);
i++;
}
}
XAML:
<Page NavigationCacheMode="Required"
x:Class="WASP.WepPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WASP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="PoleDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" x:Name="WepNumColumn" x:DefaultBindMode="OneWay"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- HERE IS WHERE I ADDED GRID SPLITTERS SO THE USERS CAN EDIT COLUMN WIDTH
THIS IS WHAT I WANT THE WIDTH OF THE OTHER COLUMNS BOUND TO-->
<controls:GridSplitter Grid.Column="1">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="3">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="5">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="7">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<Button x:Name="addWepButton"
Content="+"
FontSize="30"
Grid.Column="10"
Grid.Row="0"
Click="AddWepButton_Click" />
<TextBlock Text="WEP #"
Grid.Column="0"
Grid.Row="0"
Style="{StaticResource WepTextBlock}"/>
<TextBlock Text="Type"
Grid.Column="2"
Grid.Row="0"
Style="{StaticResource WepTextBlock}"/>
<TextBlock Text="Distance"
Grid.Column="4"
Grid.Row="0"
Style="{StaticResource WepTextBlock}"/>
<TextBlock Text="Direction"
Grid.Column="6"
Grid.Row="0"
Style="{StaticResource WepTextBlock}"/>
<TextBlock Text="Flip"
Grid.Column="8"
Grid.Row="0"
Style="{StaticResource WepTextBlock}"/>
<ScrollViewer Grid.Row="1" Grid.ColumnSpan="20">
<StackPanel x:Name="WepStackPanel">
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
How can I bind column width programmatically rather than in the XAML
You could subscribe the SizeChanged event of each TextBlock without using Binding, when you resize the column, the SizeChanged event will be triggered, then you can change the width the columns you created in code-behind. You can set the ActualWidth of ColumnDefinition you created in xaml to the width of ColumnDefinition you created in code-behind. For example:
.xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" x:Name="WepNumColumn" x:DefaultBindMode="OneWay"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" x:Name="typeColumn"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" x:Name="DistanceColumn"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" x:Name="DirectionColumn"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" x:Name="FlipColumn"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controls:GridSplitter x:Name="MySplitter" Grid.Column="1">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="3">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="5">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<controls:GridSplitter Grid.Column="7">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
<Button x:Name="addWepButton"
Content="+"
FontSize="30"
Grid.Column="10"
Grid.Row="0"
Click="AddWepButton_Click" />
<TextBlock Text="WEP #" SizeChanged="WEPTextBlock_SizeChanged"
Grid.Column="0"
Grid.Row="0"
x:Name="WEPTextBlock"
/>
<TextBlock Text="Type" SizeChanged="WEPTextBlock_SizeChanged"
Grid.Column="2" x:Name="TypeTextBlock"
Grid.Row="0"
/>
<TextBlock Text="Distance" SizeChanged="WEPTextBlock_SizeChanged"
Grid.Column="4" x:Name="DistanceTextBlock"
Grid.Row="0"
/>
<TextBlock Text="Direction" SizeChanged="WEPTextBlock_SizeChanged"
Grid.Column="6" x:Name="DirectionTextBlock"
Grid.Row="0"
/>
<TextBlock Text="Flip" SizeChanged="WEPTextBlock_SizeChanged"
Grid.Column="8" x:Name="FlipTextBlock"
Grid.Row="0"
/>
<ScrollViewer Grid.Row="1" Grid.ColumnSpan="20">
<StackPanel x:Name="WepStackPanel">
</StackPanel>
</ScrollViewer>
</Grid>
.cs:
private void addWepStack()
{
......
ColumnDefinition col0 = new ColumnDefinition();
ColumnDefinition col1 = new ColumnDefinition();
ColumnDefinition col2 = new ColumnDefinition();
ColumnDefinition col3 = new ColumnDefinition();
ColumnDefinition col4 = new ColumnDefinition();
// Set the width of each column
col0.Width = new GridLength(WepNumColumn.ActualWidth);
col1.Width = new GridLength(typeColumn.ActualWidth);
col2.Width = new GridLength(DistanceColumn.ActualWidth);
col3.Width = new GridLength(DirectionColumn.ActualWidth);
col4.Width = new GridLength(FlipColumn.ActualWidth);
......
}
private void WEPTextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (grid != null)
{
grid.ColumnDefinitions[0].Width = new GridLength(WepNumColumn.ActualWidth);
grid.ColumnDefinitions[1].Width = new GridLength(typeColumn.ActualWidth);
grid.ColumnDefinitions[2].Width = new GridLength(DistanceColumn.ActualWidth);
grid.ColumnDefinitions[3].Width = new GridLength(DirectionColumn.ActualWidth);
grid.ColumnDefinitions[4].Width = new GridLength(FlipColumn.ActualWidth);
}
}
In addition, the DataGrid XAML control can resize columns during runtime, you can use it directly to create a table format.
I would like to have ListViewItem with data from binding and with 2 events.
My code:
<ListView.ItemTemplate>
<DataTemplate>
<Grid Name="MailListViewItem">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold" Text="{Binding Topic}"/>
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="8" Foreground="Blue" Text="{Binding Time}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Foreground="Gray" Text="{Binding Text}"/>
</Grid>
</DataTemplate>
Where should I put MouseDoubleClick="Mail_DoubleClick" MouseLeftButtonUp="Mail_MouseLeftButtonUp"?
You could define an ItemContainerStyle with EventSetters:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="MouseLeftButtonUp" Handler="Mail_DoubleClick" />
<EventSetter Event="MouseDoubleClick" Handler="Mail_MouseLeftButtonUp" />
</Style>
</ListView.ItemContainerStyle>
...
Or you could handle the events of the Grid in the DataTemplate provided that you set its Background property to some brush:
<Grid Name="MailListViewItem" Background="Transparent" MouseLeftButtonDown="...">
If you handle MouseLeftButtonDown, there is a ClickCount property of the MouseButtonEventArgs that you can check to determine whether the element as double clicked:
private void MailListViewItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.ClickCount == 2)
{
//doule click
}
else
{
//click...
}
}
In my WPF Application I have a two textblocks which get filled from the code behind with a run. Every second line should have a different background color so it gets easier to read. Unfortunately, the lines are only dyed as far as they are written. But I want the background color to go over the entire line and not just the written area.
Code:
for (int i = 0; i < GlobalSettings.prefixList.Count; i++)
{
runLeft = new Run(GlobalSettings.prefixList[i].prefix + "\n");
runRight = new Run(GlobalSettings.prefixList[i].amount + "\n");
if (i % 2 == 0)
{
runLeft.Background = Brushes.Gray;
runRight.Background = Brushes.Gray;
}
else
{
runLeft.Background = Brushes.LightGray;
runRight.Background = Brushes.LightGray;
}
tblock_StatisticsLeft.Inlines.Add(runLeft);
tblock_StatisticsRight.Inlines.Add(runRight);
}
Example Picture
The two textblocks are seamlessly together in the middle so it would look like it is a single line in a single textblock. The spaces between the lines are negligible if this makes it easier.
Is there a solution without using a textbox or richtextbox?
EDIT:
XAML Code:
<UserControl x:Class="MuseKeyGenApp.UCStartUp"
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:MuseKeyGenApp"
mc:Ignorable="d"
Background = "#FF0069B4"
d:DesignHeight="500" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="0"/>
<RowDefinition Height="*" MinHeight="80"/>
<RowDefinition Height="*" MinHeight="80"/>
<RowDefinition Height="*" MinHeight="80"/>
<RowDefinition Height="*" MinHeight="80"/>
<RowDefinition Height="*" MinHeight="80"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MinWidth="150"/>
<ColumnDefinition Width="0.75*" MinWidth="100"/>
<ColumnDefinition Width="0.75*" MinWidth="100"/>
<ColumnDefinition Width="0.75*" MinWidth="100"/>
<ColumnDefinition Width="0.75*" MinWidth="100"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="2" Grid.RowSpan="3" Grid.Column="1" Grid.ColumnSpan="2" Margin="10,35,12,12" Name="sv_PrefixList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tblock_StatisticsLeft" HorizontalAlignment="Stretch" LineHeight="20" TextWrapping="Wrap" Margin="0,0,0,0" Text="TextBlock" VerticalAlignment="Stretch" TextAlignment="Left"/>
<TextBlock Grid.Column="1" x:Name="tblock_StatisticsRight" HorizontalAlignment="Stretch" LineHeight="20" TextWrapping="Wrap" Margin="0,0,10,0" Text="TextBlock" VerticalAlignment="Stretch" TextAlignment="Right"/>
</Grid>
</ScrollViewer>
</Grid>
I left out all the other stuff of the control that is not relevant.
You could (should) use an ItemsControl. Set the ItemsSource property of it to your GlobalSettings.prefixList collection, i.e. you replace your for loop with this:
ic.ItemsSource = GlobalSettings.prefixList;
Make sure that "prefix" and "amount" are public properties (and not fields) of your "prefix" type or whatever you call it:
public string prefix { get; set; }
You then put the Grid with the TextBlocks in the ItemTemplate of the ItemsControl and bind the TextBlocks to the "prefix" and "amount" properties:
<ScrollViewer Grid.Row="2" Grid.RowSpan="3" Grid.Column="1" Grid.ColumnSpan="2" Margin="10,35,12,12" Name="sv_PrefixList">
<ItemsControl x:Name="ic" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tblock_StatisticsLeft" HorizontalAlignment="Stretch" LineHeight="20" TextWrapping="Wrap" Margin="0,0,0,0" VerticalAlignment="Stretch" TextAlignment="Left"
Text="{Binding prefix}"/>
<TextBlock Grid.Column="1" x:Name="tblock_StatisticsRight" HorizontalAlignment="Stretch" LineHeight="20" TextWrapping="Wrap" Margin="0,0,10,0" VerticalAlignment="Stretch" TextAlignment="Right"
Text="{Binding amount}"/>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Gray" TargetName="grid"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray" TargetName="grid"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
This should get you coloured lines.
Here is the correct way of doing this:
Xaml:
<Window.Resources>
<local:BackConverter x:Key="BackConverter"/>
</Window.Resources>
<Grid Margin="10">
<ItemsControl Name="ic">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel LastChildFill="False">
<DockPanel.Background>
<MultiBinding Converter="{StaticResource BackConverter}">
<Binding />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}"/>
</MultiBinding>
</DockPanel.Background>
<TextBlock DockPanel.Dock="Left" Text="{Binding Left}">
</TextBlock>
<TextBlock DockPanel.Dock="Right" Text="{Binding Right}">
</TextBlock>
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
c# code:
public class obj
{
public string Left { get; set; }
public string Right { get; set; }
}
public MainWindow()
{
InitializeComponent();
DataContext = this;
List<obj> objects = new List<obj>();
for (int i = 0; i < 10; i++)
{
var left = "aaaaa";
var right = "bbbbb";
objects.Add(new obj() { Left = left, Right = right });
}
ic.ItemsSource = objects;
}
the converter:
public class BackConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var index = ((ItemsControl)values[1]).Items.IndexOf(values[0]);
if (index % 2 == 0)
return Brushes.Gray;
return Brushes.White;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Am trying to add Set of labels and images in a stackpanel in code behind.And finally am attaching that stackpanel to particular column of a grid control.My expected output should be like
<image><label>
combination
but my output is like it displays the label in first column of grid and the image in the next column.(I was not able to add the snapshots since i dont have enough reputations)
XAML code
<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight" >
<Grid Name="grid_window">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
<TabItem Header="Home" BorderBrush="Green"/>
</TabControl>
</Grid>
code behind
public MainWindow()
{
InitializeComponent();
DBCoding dbobj = new DBCoding();
//Contains names {"Dhivi","Walle"}
List<string> online = new List<string>();
online = dbobj.onlineUsers();
StackPanel myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Vertical;
foreach (var item in online)
{
Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("F:\\ChatApplication\\Ping\\Ping\\Images\\visible.png"));
myImage.Width = 10;
myImage.Height = 10;
//myImage.Margin = new Thickness(-10,0,-80,0);
myImage.Height = 10;
Label user = new Label();
user.Content = item.ToString();
myStackPanel.Children.Add(myImage);
myStackPanel.Children.Add(user);
}
grid_window.Children.Add(myStackPanel);
Grid.SetColumnSpan(myStackPanel, 1);
Grid.SetColumn(myStackPanel, 0);
}
Can anybody tell me the solution.
Here's how your code should look like, using data binding, an ItemsControl and a DataTemplate:
XAML
<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight" >
<Grid Name="grid_window">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
<TabItem Header="Home" BorderBrush="Green"/>
</TabControl>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<!-- You really should add the image as a resource to the project -->
<Image Source="F:\ChatApplication\Ping\Ping\Images\visible.png"
Width="10" Height="10" />
<TextBlock Text="{Binding}" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
C#
public MainWindow()
{
InitializeComponent();
DBCoding dbobj = new DBCoding();
List<string> online = dbobj.onlineUsers();
DataContext = online;
}
Assume something simple like:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Name="MainTextBlock" Grid.Column="1" Text="Hello" />
</Grid>
How can I get the absolute position of MainTextBlock?
I think this will work...
var ttv = MainTextBlock.TransformToVisual(Window.Current.Content);
Point screenCoords = ttv.TransformPoint(new Point(0, 0));