We Keep Coding

Width of a grid column

I have a problem with setting a Column width in my grid. That grid is auto-generated inside a button and I don't know the actual width of it nor the width of a window. I have defined two columns in it, one has static width and for the second one I want to be set to all the left place. Problem is that I am generating all those grids and columns just at the moment of running of a program so I'm not able to use the width property of any other object as everything is double.NaN.
What I want to do is generating a button grid containing two columns, one static width and the second which width can change through the time like on the picture (the red text is just a comment).
The code I use for generating that grid. The problematic column is the one with width property set to "???" for now:
Button GridButton = new Button()
{
HorizontalAlignment = HorizontalAlignment.Stretch,
Margin = new Thickness { Left = 10, Right = 5, Top = 10, Bottom = 10 },
Height = 70,
/*HorizontalAlignment = HorizontalAlignment.Center,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Top,
VerticalContentAlignment = VerticalAlignment.Center,
*/
Tag = GridButtonTag,
Background = new SolidColorBrush(Colors.White),
Padding = new Thickness { Left = 0, Right = 0, Bottom = 0, Top = 0 }
};
WholeGrid.Children.Add(GridButton);
Grid ButtonContentGrid = new Grid()
{
Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 },
};
double ColumnWidth = GridButton.Width - 80;
ColumnDefinition Column1 = new ColumnDefinition();
ColumnDefinition Column2 = new ColumnDefinition();
Column1.Width = new GridLength(????);
Column2.Width = new GridLength(90);
ButtonContentGrid.ColumnDefinitions.Add(Column1);
ButtonContentGrid.ColumnDefinitions.Add(Column2);
TextBlock Questions = new TextBlock()
{
Margin = new Thickness { Right = 0, Top = 0, Bottom = 0 },
Width = 90,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Right,
FontSize = 45,
Text = QuestionsAmount,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Right
};
Grid QuestionsGrid = new Grid()
{
Width = 90,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
QuestionsGrid.Children.Add(Questions);
Grid.SetColumn(QuestionsGrid, 1);
ButtonContentGrid.Children.Add(QuestionsGrid);
Grid TwoTexts = new Grid()
{
Height = 70,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Stretch,
Width = GridButton.Width - 80,
Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 }
};
RowDefinition TextRow1 = new RowDefinition();
RowDefinition TextRow2 = new RowDefinition();
TextRow1.Height = new GridLength(50);
TextRow2.Height = new GridLength(20);
TwoTexts.RowDefinitions.Add(TextRow1);
TwoTexts.RowDefinitions.Add(TextRow2);
TextBlock NameBox = new TextBlock()
{
Margin = new Thickness { Left = 0, Top = 0},
VerticalAlignment = VerticalAlignment.Top,
HorizontalAlignment = HorizontalAlignment.Left,
FontSize = 35,
Text = Name,
FontWeight = FontWeights.Bold
};
TextBlock DescriptionBox = new TextBlock()
{
Margin = new Thickness { Left = 0, Bottom = -10 },
VerticalAlignment = VerticalAlignment.Bottom,
HorizontalAlignment = HorizontalAlignment.Left,
FontSize = 15,
Text = Description
};
Grid.SetRow(NameBox, 0);
TwoTexts.Children.Add(NameBox);
Grid.SetColumn(DescriptionBox, 1);
TwoTexts.Children.Add(DescriptionBox);
Grid.SetColumn(TwoTexts, 0);
ButtonContentGrid.Children.Add(TwoTexts);
GridButton.Content = ButtonContentGrid;
Alternate option - ListView (still the same problem and again the Place With WidthValue="????" is the one I don't know how to set):
<ListView Name="FileListView" Margin="0,0,0,0" Padding="10,10,10,10">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="90" Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="2"/>
<RowDefinition Height="92"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
BorderThickness="0,2"
CornerRadius="2"
BorderBrush="Black"
Margin="40,0"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
/>
<Grid Grid.Row="1" Height="90" Margin="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="65"/>
</Grid.ColumnDefinitions>
<Grid Name ="Texts" Grid.Column="0" HorizontalAlignment="Stretch" Margin="10,10">
<Button HorizontalAlignment ="Stretch" Margin ="0" Height = "70" Tag = "{Binding GridButtonTag}" Background ="#00FFFFFF" Padding = "0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" FontSize = "45" FontWeight="Bold" TextAlignment="Right" Text="{Binding QuestionsAmount}" />
<Grid Grid.Column="0" Width="????">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize = "35" FontWeight="Bold" TextAlignment="Left" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" FontSize = "17" TextAlignment="Left" Text="{Binding Description}" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Button>
</Grid>
<Grid Grid.Column="1">
<Grid Name="Buttons" Width ="65" HorizontalAlignment="Stretch" Padding = "10,5,10,10" Height = "90" Margin = "0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Tag = "{Binding PlayButtonTag}" Margin = "0" Height = "50" Width = "50" HorizontalAlignment = "Center" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="50" Height="50" Source="ms-appx:///Assets/Images/PlayIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
<Grid Grid.Row="1" Margin="0,0,0,0" Padding="0,0,0,0" Width="50" Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Tag = "{Binding EditButtonTag}" Margin = "0" Height = "20" Width = "20" HorizontalAlignment = "Left" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="20" Height="20" Source="ms-appx:///Assets/Images/EditIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"
</Button>
<Button Grid.Column="1" Margin = "0" Tag = "{Binding DeleteButtonTag}" Height = "20" Width = "20" HorizontalAlignment = "Right" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="20" Height="20" Source="ms-appx:///Assets/Images/DeleteIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The question is what should I change or write in that code to achieve the right result?
Thanks in advance.

I don't think you have to set the Width you're trying to set. The problem in this case should be that the content of the DataTemplate is not stretched at all.
You have to add the following lines to your ListView to let the content stretch:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
By the way, I see, you are using Grid with ColumnDefinitions or RowDefinitions really often in your ListView. This could slow down your UI.. You should consider using StackPanel and RelativePanel as well as removing some unnecessary Grids.

Change dot for comma in chart labels Charting c#

i have to change the decimal separator of the labels of my chart. I can't put them directly like string because they need a doublé to make the chart.
Here is the code:
private static byte[] ObtenerBarraDoble(IList<ValorBarraDTO> valores)
{
var newColor1 = Color.FromArgb(187, 189, 191);
var newColor2 = Color.FromArgb(0, 138, 209);
using (var graficoPie = new Chart { Height = 200, Width = 700, RenderType = RenderType.BinaryStreaming })
{
var chartAreaPie = new ChartArea();
//chartAreaPie.AxisX.LabelStyle.Format = "dd/MMM\nhh:mm";
chartAreaPie.AxisX.MajorGrid.LineColor = Color.White;
chartAreaPie.AxisY.MajorGrid.LineColor = Color.White;
chartAreaPie.AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8f);
chartAreaPie.AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8f);
chartAreaPie.AxisX.LabelStyle.Format = "N0";
chartAreaPie.AxisY.LabelStyle.Format = "N0";
graficoPie.ChartAreas.Add(chartAreaPie);
var serieNuevo = new Series("Cartera Actual")
{
ChartType = SeriesChartType.Column,
XValueMember = "label",
YValueMembers = "valor1",
Color = newColor1,
Legend = "Cartera Actual",
IsValueShownAsLabel = true,
LabelFormat = "N1",
CustomProperties = "LabelStyle=Top"
};
graficoPie.Series.Add(serieNuevo);
var serie = new Series("Cartera Recomendada")
{
ChartType = SeriesChartType.Column,
XValueMember = "label",
YValueMembers = "valor2",
Color = newColor2,
Legend = "Cartera Propuesta",
IsValueShownAsLabel = true,
LabelFormat = "N1",
CustomProperties = "LabelStyle=Top"
};
graficoPie.Series.Add(serie);
graficoPie.DataSource = valores;
return PdfHelper.ChartABinario(graficoPie);
}
}
I think maybe in CustomProperties? i need to do this, please help!

Can you tell me if you are using XAML? The key is the template style formatting. This is how i did some formatting. If it doesn't help, I apologize for wasting your time.
<Style x:Key="SeriesColumn" TargetType="DVC:ColumnDataPoint">
<Setter Property="Background" Value="{Binding BackColor}"></Setter>
<Setter Property="Foreground" Value="{Binding ForeColor}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DVC:ColumnDataPoint">
<Grid>
<Rectangle
Fill="{TemplateBinding Background}"
Stroke="Black"
StrokeThickness="1"
/>
<Grid
Background="Transparent"
Margin="{Binding SeriesMargin}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<TextBlock
HorizontalAlignment="Center"
Background="Transparent"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding FormattedDependentValue}"
FontWeight="Bold"
FontSize="12"
/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The key is the Template and the TetBlock. if think it's possible to go deep enough to be able to replace , with a .

Scale child back in WPF

I have a Grid which scaled/zoomed with ScaleTransform by slider. At runtime many UIElements are added to this Grid.
I want to show some tooltips, but not scaled! How should I do that?
For the example: Grid has scaleX and scaleY 2, so I set new ScaleTransform(0.5, 0.5), but didn't help. It seems that the most similar value is 0.740.. Why?
Even Grid's LayoutTransform.Inverse is set to scale values 0.5.
XAML:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="Auto" Width="Auto" Name="graphScrollViewer" ScrollChanged="graphScrollViewer_ScrollChanged">
<Grid Margin="0,0,0,0" Name="graphGrid" Width="Auto" Height="Auto" ScrollViewer.IsDeferredScrollingEnabled="True" MouseLeftButtonDown="graphGrid_MouseLeftButtonDown" MouseLeftButtonUp="graphGrid_MouseLeftButtonUp" MouseMove="graphGrid_MouseMove">
<Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=sldZoom, Path=Value}" ScaleY="{Binding ElementName=sldZoom, Path=Value}" />
</Grid.LayoutTransform>
</Grid>
</ScrollViewer>
<Slider Minimum="0.1" Maximum="20" Value="1" x:Name="sldZoom" Panel.ZIndex="10" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,20,20" Height="23" Width="100" ValueChanged="sldZoom_ValueChanged"/>
Code-behind:
(method of Rectangle (MouseEnter event) dynamically added to grid)
private void rect_MouseEnter(object sender, MouseEventArgs e)
{
RectToolTip = new TextBlock();
RectToolTip.HorizontalAlignment = HorizontalAlignment.Left;
RectToolTip.VerticalAlignment = VerticalAlignment.Top;
RectToolTip.TextAlignment = TextAlignment.Center;
RectToolTip.Height = this.HeaderTwoHeight + 1;
RectToolTip.Text = " " + (RectsTasks[(sender as Rectangle)]).Info + " ";
RectToolTip.Background = this.ToolTipBackground;
RectToolTip.Foreground = this.ToolTipFontColor;
RectToolTipBorder = new Border();
RectToolTipBorder.Child = RectToolTip;
RectToolTipBorder.BorderThickness = new Thickness(this.ToolTipBorderThickness);
RectToolTipBorder.BorderBrush = this.ToolTipBorderColor;
RectToolTipBorder.Margin = new Thickness(e.GetPosition((graphGrid)).X + 10, e.GetPosition((graphGrid)).Y + 10, 0, 0);
RectToolTipBorder.VerticalAlignment = System.Windows.VerticalAlignment.Top;
RectToolTipBorder.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
graphGrid.Children.Add(RectToolTipBorder);
RectToolTipBorder.LayoutTransform = RectToolTip.LayoutTransform = new ScaleTransform(????);
Grid.SetZIndex(RectToolTip, 20);
Grid.SetZIndex(RectToolTipBorder, 20);
}

You need to assign the inverse transform to the child element, so that the child will stay intact.
RectToolTipBorder.LayoutTransform = graphGrid.LayoutTransform.Inverse as Transform;

Bug in C# code equivalent of Silverlight xaml

Why does the following C# code not produce the equivalent of my Silverlight code?
XAML
<Border CornerRadius="8" BorderBrush="White" Height="70" BorderThickness="4">
<StackPanel Orientation="Horizontal">
<Border Margin="5,0,0,0" BorderBrush="White" Height="45" Width="45" BorderThickness="2" CornerRadius="2" Background="White">
<Image Source="/Crystal%20Cloud;component/Resources/Images/weapons/swords/sword_0.png" />
</Border>
<StackPanel Margin="10,0,0,0">
<TextBlock Text="Wooden Dagger" FontFamily="Comic Sans MS" />
<TextBlock Text="DPS: 1" FontFamily="Comic Sans MS" FontSize="16" Margin="15,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
C#
private Border CreateListItem(Item item)
{
// Main border
Border itemBorder = new Border();
itemBorder.BorderThickness = new Thickness(4);
itemBorder.CornerRadius = new CornerRadius(8);
itemBorder.BorderBrush = new SolidColorBrush(Colors.White);
itemBorder.Height = 70;
// Main stack panel
StackPanel mainPanel = new StackPanel();
mainPanel.Orientation = Orientation.Horizontal;
itemBorder.Child = mainPanel;
// The item's image border
Border imageBorder = new Border();
imageBorder.Margin = new Thickness(5, 0, 0, 0);
itemBorder.BorderThickness = new Thickness(2);
itemBorder.CornerRadius = new CornerRadius(2);
itemBorder.BorderBrush = new SolidColorBrush(Colors.White);
itemBorder.Background = new SolidColorBrush(Colors.White);
itemBorder.Height = 45;
itemBorder.Width = 45;
mainPanel.Children.Add(imageBorder);
// The item's image
Image image = new Image();
image.Source = new BitmapImage(new Uri("/Crystal%20Cloud;component/Resources/Images/weapons/swords/sword_0.png"));
imageBorder.Child = image;
// The stack panel for the text
StackPanel textPanel = new StackPanel();
textPanel.Margin = new Thickness(10, 0, 0, 0);
mainPanel.Children.Add(textPanel);
// The title text block
TextBlock titleText = new TextBlock();
titleText.Text = "Wooden Dagger";
titleText.FontFamily = new FontFamily("Comic Sans MS");
textPanel.Children.Add(titleText);
// The status text block
TextBlock statusText = new TextBlock();
statusText.Text = "DPS: 1";
statusText.FontFamily = new FontFamily("Comic Sans MS");
statusText.FontSize = 16;
statusText.Margin = new Thickness(15, 0, 0, 0);
textPanel.Children.Add(statusText);
return itemBorder;
}

Erg... just found the bug itemBorder should be changed to imageBorder.

Creating a silverlight border in codebehind?

I have the following border in XAML:
<Border
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.RowSpan="3"
CornerRadius="1,1,1,1"
Background="Red"
BorderBrush="#333333"
BorderThickness="1,1,1,1"
x:Name="border"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter
x:Name="contentPresenter"
Margin="10,0,10,0"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
and I'm trying to create a similar border in code behind (C#). I can't get beyond Border b = new Border(), I'm not sure how I'm supposed to put the border inside the specific grid column or how to span it.
Any ideas?

Something like this:
var border = new Border();
Grid.SetColumn(border, 0);
Grid.SetColumnSpan(border, 3);
Grid.SetRowSpan(border, 3);
border.CornerRadius = new CornerRadius(1);
border.Background = new SolidColorBrush(Colors.Red);
border.BorderBrush = new SolidColorBrush(Color.FromArgb(0xff, 0x33, 0x33, 0x33));
border.BorderThickness = new Thickness(1);
border.RenderTransformOrigin = new Point(0.5, 0.5);
var transformGroup = new TransformGroup();
transformGroup.Children.Add(new ScaleTransform());
transformGroup.Children.Add(new SkewTransform());
transformGroup.Children.Add(new RotateTransform());
transformGroup.Children.Add(new TranslateTransform());
border.RenderTransform = transformGroup;
Let me know if you want me to set the rest of the properties.

If that can help you :
Border b = new Border();
Grid.SetColumn(b, 0);
Grid.SetColumnSpan(b, 3);
Grid.SetRowSpan(b, 3);
b.CornerRadius = new CornerRadius(1);
b.Background = new SolidColorBrush(Colors.Red);
// Then add your border to the grid
g.Children.Add(b);
But for the ContentPresneter I dont know how to do that