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.
Related
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();
}
}
I have a user control with custom popup (UserHelperButton). I have manually set the Vertical and Horizontal Offset to show popup on the right position. Now I need to update it's position to center. I'm not able to center it on x axis and on vertical.
On the root windows I add add UserHelperButton on different locations
<Grid Margin="0,0,0,25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<UserControls:UserLabel Text="Varnost v dvoje" Grid.Column="0" />
<UserControls:UserCheckBox x:Name="cbxDouble" Grid.Column="1" cbxClick="cbxDouble_cbxClick" />
<UserControls:UserHelperButton Grid.Column="2" HelperText="V primeru, da se zavarujeta dve osebi, obe zavarovani osebi pridobita nižjo premijo za sklenjena zavarovanja." />
<UserControls:UserLabel x:Name="lblRefNum" Text="Referenčna številka" Grid.Column="3" />
<UserControls:UserCheckBox x:Name="cbxRefNum" Grid.Column="4" cbxClick="cbxRefNum_cbxClick" />
<UserControls:UserTextBox x:Name="txbRefNum" Grid.Column="5" ValidationMessage="Vnesite referenčno številko!" />
<UserControls:UserLabel Text="Zaposlen na Pošta Slovenija" Grid.Column="6" />
<UserControls:UserCheckBox x:Name="cbxPS" Grid.Column="7" cbxClick="cbxPS_cbxClick" />
or
<Grid Margin="0,25,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<UserControls:UserLabel Grid.Column="0" x:Name="lblInsurance" Text="Priporočena varnost do 65. leta" LabelMode="Heading" ValidationMessage="Vsota zavarovanj je premajhna!" />
<UserControls:UserHelperButton x:Name="helper2" Grid.Column="2" />
</Grid>
userControl xaml:
<Grid x:Name="grid" Margin="0" MaxHeight="50" Canvas.ZIndex="4" VerticalAlignment="Center">
<Button x:Name="btnHelper" AutomationProperties.Name="" Style="{StaticResource HelpAppBarButtonStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Height="70" Click="btnHelper_Click" />
<Popup x:Name="popHelper" IsLightDismissEnabled="True" VerticalOffset="-150" HorizontalOffset="-50">
<Border BorderThickness="25" CornerRadius="25" BorderBrush="Gray" Background="Gray">
<Grid Background="Gray" Width="400" Height="300">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<local:UserLabel Text="Pomoč" LabelMode="Heading" VerticalAlignment="Top" />
<Button x:Name="btnClose" AutomationProperties.Name="" Grid.Row="0" Style="{StaticResource NoAppBarButtonStyle}" HorizontalAlignment="Right" VerticalAlignment="Top" Padding="12,0,0,0" Height="100" Click="btnClose_Click" RenderTransformOrigin="0.5,0.5" >
<Button.RenderTransform>
<CompositeTransform TranslateY="-15"/>
</Button.RenderTransform>
</Button>
<WebView x:Name="webviewControl" Grid.Row="1" Margin="0,20,0,0" Height="200" Width="400" />
</Grid>
</Border>
</Popup>
On load event I fill popup with help text
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
string html = "<html><body style=\"font-family: 'Segoe UI'; background-color: gray; color: white; margin: 0;\">" + g_text + "</body></html>";
var fragment = HtmlFormatHelper.GetStaticFragment(HtmlFormatHelper.CreateHtmlFormat(html));
webviewControl.NavigateToString(fragment);
}
So how can I do that?
Thx
Poki
I do it like this:
private void popup_Loaded(object sender, RoutedEventArgs e)
{
popup.HorizontalOffset = (Window.Current.Bounds.Width - popupGrid.Width) / 2;
popup.VerticalOffset = (Window.Current.Bounds.Height - popupGrid.Height) / 2;
}
How do I set the text source for each image? I want a specific description for each image, but right now I have the same text for all of them. I was thinking of creating a folder in which to make 10 .txt files and set each image to have one of the files as a description.. but I only know how to do this theoretically. This is the instruction and the button that I'm talking about.
var files = Directory.GetFiles(#".\GalleryImages");
foreach (var file in files)
{
FileInfo fileInfo = new FileInfo(file);
WineModel wineModel = new WineModel();
wineModel.Image = new Uri(file, UriKind.Relative);
wineModel.Description = file + "text text text text text text text text text text text" +
Environment.NewLine + "text text text text text text text text text text text";
wineModel.Price = new Random().NextDouble();
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = wineModel.Image;
bi.EndInit();
var button = new KinectTileButton
{
Label = System.IO.Path.GetFileNameWithoutExtension(file),
Background = new ImageBrush(bi),
Tag = wineModel
};
this.wrapPanel.Children.Add(button);
}
This is the button
private void KinectTileButtonClick(object sender, RoutedEventArgs e)
{
var button = (KinectTileButton)e.Source;
var wineModel = button.Tag as WineModel;
var selectionDisplay = new SelectionDisplay(wineModel);
this.kinectRegionGrid.Children.Add(selectionDisplay);
e.Handled = true;
}
EDIT:this is the xaml code.. can you give me more details Stefan? I don't really understand what you're trying to say
<UserControl x:Class="Microsoft.Samples.Kinect.ControlsBasics.SelectionDisplay"
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:k="http://schemas.microsoft.com/kinect/2013"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Background="Transparent"
FontFamily="Segoe UI"
FontSize="30">
<!--<Grid x:Name="layoutRoot">-->
<Grid x:Name="grid" Background="{StaticResource BlueBrush}" Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" x:Name="Display" HorizontalAlignment="Left"
VerticalAlignment="Center" Height="185" Width="293" Margin="50,0,10,0" />
<TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" x:Name="Description" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" MaxHeight="400" MaxWidth="500"
Margin="0,20,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Price" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="85" Width="294"/>
<Viewbox Grid.Row="0" Grid.Column="3" MaxHeight="720" MaxWidth="1280" Margin="60 60 60 60">
<Canvas Width="1280" Height="720">
<k:KinectCircleButton Style="{StaticResource CancelButtonStyle}" Canvas.Right="-153" Canvas.Top="-153"
Foreground="White" Height="200" Width="200" Click="OnCloseFullImage" />
</Canvas>
</Viewbox>
</Grid>
<!--</Grid>-->
EDIT:This is xaml code
<UserControl x:Class="Microsoft.Samples.Kinect.ControlsBasics.SelectionDisplay"
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:k="http://schemas.microsoft.com/kinect/2013"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Background="Transparent"
FontFamily="Segoe UI"
FontSize="30">
<!--<Grid x:Name="layoutRoot">-->
<Grid x:Name="grid" Background="{StaticResource BlueBrush}" Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" x:Name="Display" HorizontalAlignment="Left"
VerticalAlignment="Center" Height="185" Width="293" Margin="50,0,10,0" />
<TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" x:Name="Description" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" MaxHeight="400" MaxWidth="500"
Margin="0,20,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Price" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="85" Width="294"/>
<Viewbox Grid.Row="0" Grid.Column="3" MaxHeight="720" MaxWidth="1280" Margin="60 60 60 60">
<Canvas Width="1280" Height="720">
<k:KinectCircleButton Style="{StaticResource CancelButtonStyle}" Canvas.Right="-153" Canvas.Top="-153"
Foreground="White" Height="200" Width="200" Click="OnCloseFullImage" />
</Canvas>
</Viewbox>
</Grid>
<!--</Grid>-->
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...
I have the following layou:
<s:SurfaceWindow x:Class="Prototype_Concept_2.SurfaceWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Title="Prototype_Concept_2"
>
<s:SurfaceWindow.Resources>
<ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
</s:SurfaceWindow.Resources>
<Grid Background="{StaticResource WindowBackground}" >
<Grid Name="ProjectsGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Name="ProjectsHeader" Grid.ColumnSpan="2" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="25" Text="Please choose one of the following projects" Grid.Row="0"></TextBox>
<s:SurfaceButton Name="BottomButton" HorizontalAlignment="Right" FontSize="20" Width="100" Grid.Column="1" Grid.Row="2" Foreground="White" Content="Refresh"></s:SurfaceButton>
<s:SurfaceListBox Background="Black" Grid.ColumnSpan="2" Name="ProjectsList" Grid.Row="1" ItemsSource="{Binding Projects}"></s:SurfaceListBox>
<Label Name="ProjectsFooter" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" FontSize="15" Content="Fetching projects data ..."></Label>
</Grid>
<Grid ShowGridLines="True" Name="SmellHeader" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="38"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="0" Grid.Row="0" s:Contacts.PreviewContactDown="BrainClass_PreviewContactDown">
<Label Background="Black" Foreground="White" Content="BrainClass" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="1" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="God Class" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="2" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="Tradition Breaker" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="3" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="3" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="RefusedParent Bequest" HorizontalContentAlignment="Center"></Label>
</Viewbox>
</Grid>
<Canvas Name="RootLayer" Grid.Row="1" Grid.ColumnSpan="4">
</Canvas>
</Grid>
</s:SurfaceWindow>
To the RootLayer I add some Ellipse. Later I want to reoder them:
internal void setFocus(SourceManager manager)
{
Console.WriteLine("Set focus to class " + getFullName());
foreach (SourceFile sf in manager.getBrainClasses())
{
sf.getVisualizer().Fill = Brushes.Red;
Canvas.SetZIndex(sf.getVisualizer(), 0);
}
this.getVisualizer().Fill = Brushes.Blue;
Canvas.SetZIndex(this.getVisualizer(), 1);
manager.window.RootLayer.InvalidateArrange();
manager.window.RootLayer.InvalidateVisual();
}
The Ellipse is referenced by this.getVisualizer();
However, nothing changes? How can I bring one Ellipse to the front?
It's not fully clear from your code post how the ellipses are added to the canvas but here is a small sample that does essentially what you want to do:
<Grid>
<Canvas x:Name="RootLayer" Width="500" Height="500" />
</Grid>
And in the constructor of the code behind, create some ellipses:
for (int i = 0; i < 10; i++)
{
Ellipse e = new Ellipse
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(
Color.FromArgb(0xDD,
(Byte) r.Next(255)
(Byte) r.Next(255)
(Byte) r.Next(255))),
Stroke = Brushes.Black,
StrokeThickness = 1,
};
e.MouseUp += new MouseButtonEventHandler(e_MouseUp);
Canvas.SetLeft(e, r.Next(400));
Canvas.SetTop(e, r.Next(400));
RootLayer.Children.Add(e);
}
Event handler to handle mouse click on the ellipses
void e_MouseUp(object sender, MouseButtonEventArgs e)
{
foreach (UIElement item in RootLayer.Children)
Panel.SetZIndex(item, 0);
Panel.SetZIndex((UIElement)sender, 1);
}
With the code above, whenever an ellipse is clicked (mouse up), it will raise above all the other ellipses in that canvas.