I have a grid that I need to put into a border, doing this via XAML is easy
but how do I do this via C#?
everything that I have found thus far wants to add the border around each cell.
I need it to come out looking the same way XAML does it, please help!
I can not get the XAML to post correctly here:
<Border Grid.Column="1"
Grid.Row="0"
Background="AliceBlue"
BorderBrush="Black"
BorderThickness="4"
x:Name="Side6"
Visibility="Collapsed">
<UIElement.Projection>
<PlaneProjection RotationY="-90" />
</UIElement.Projection>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="2" Grid.Row="1" Click="RotateRight_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Right</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 4</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button Grid.Column="0" Grid.Row="1" Click="RotateLeft_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Left</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 2</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Text="Side 6">
</TextBlock>
</Grid>
</Border>
Here is the C# code that I'm using, maybe you can see what I am doing wrong?
public static void panelMain(string strPassGridName, System.Windows.Media.Color mcPassColor,
int intRowProperty, int intColumnProperty, Visibility vVisibility,
string[] strButtonTitles, Grid passLayoutRoot, Canvas passCanvas)
{
Grid panelGrid = new Grid();
panelGrid.Name = strPassGridName;
panelGrid.Background = new SolidColorBrush(mcPassColor);
panelGrid.SetValue(Grid.RowProperty, intRowProperty);
panelGrid.SetValue(Grid.ColumnProperty, intColumnProperty);
panelGrid.Visibility = vVisibility;
RowDefinition row1 = new RowDefinition();
row1.Height = new GridLength(100, GridUnitType.Auto);
panelGrid.RowDefinitions.Add(row1);
ColumnDefinition column1 = new ColumnDefinition();
column1.Width = new GridLength(100);
panelGrid.ColumnDefinitions.Add(column1);
passLayoutRoot.Children.Add(panelGrid);
}
I figured it out, I needed to create the border first then add the grid to the border.
One major difference is that I could not reference the border object directly, I needed to "find it"
Border findBorder = passLayoutRoot.FindName("bd" + strPassGridName) as Border;
if (findBorder == null)
{ }
else
{
findBorder.Child = panelGrid;
}
This worked perfectly....
Thanks to all that attempted to help
You can do it as below,
Border gridBorder = new Border();
gridBorder.BorderBrush = new SolidColorBrush(Colors.Black);
gridBorder.BorderThickness = new Thickness(4);
gridBorder.Child = new Grid(); //Your grid here
LayoutRoot.Children.Add(border); // ParentGrid(layout) holding the border
Related
<Grid Name="PlotGrid" Margin="50,50,50,50">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="500" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Canvas Name="canvas" Grid.Row="0" Grid.Column="0" />
<Border Name="firstborder"
Grid.Column="0"
Grid.Row="0"
BorderBrush="Black"
BorderThickness="1">
</Border>
<Border Name="secondborder"
Grid.Column="1"
Grid.Row="0"
BorderBrush="Black"
BorderThickness="1">
</Border>
<Border Name="thirdborder"
Grid.Column="0"
Grid.Row="1"
BorderBrush="Black"
BorderThickness="1">
</Border>
<Border Name="fourthborder"
Grid.Column="1"
Grid.Row="1"
BorderBrush="Black"
BorderThickness="1">
</Border>
</Grid>
I am dynamically adding an image to the canvas above, which is inside a grid cell:
try
{
if ((myStream = openFileDialog.OpenFile()) != null)
{
using (myStream)
{
// Insert code to read the stream here.
image1.Source = new BitmapImage(new Uri( openFileDialog.FileName));
canvas.Children.Add(image1);
}
}
}
My expectation is that the imported image will remain inside the canvas and inside the grid cell that contains the canvas. But it occupies a huge space well beyond the grid cell. How can I keep the imported image within the confines of the grid cell?
You need to set the image size, otherwise it will be full size
image1.Stretch = Stretch.Uniform;
image1.StretchDirection = StretchDirection.Both;
image1.BeginInit();
image1.Source = new BitmapImage(new Uri( openFileDialog.FileName));
image1.Width = canvas.ActualWidth;
image1.Height = canvas.ActualHeight;
image1.EndInit();
You may also need to add code to handle resizing of the grid.
Perhaps this might work:
...
image1.Stretch = Stretch.Uniform;
image1.StretchDirection = StretchDirection.Both;
image1.BeginInit();
image1.Source = new BitmapImage(new Uri( openFileDialog.FileName));
image1.EndInit();
canvas.Children.Add(image1);
My problem is that my items won't add to the list. I try to add 3 texts and one image location to the list. I try everything but I couldn't do it.
XAML code
<ListBox Name="mylistbox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Grid.RowSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="s1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="100"/>
<RowDefinition Height="30"/>
<RowDefinition Height="20/"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding naslov}" Tag="{Binding broj}" FontSize="32" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" Grid.Row="1" Grid.Column="2" />
<TextBlock Text="{Binding datum}" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2" Grid.Column="2"/>
<Image Source="{Binding slika}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
C# code
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
mylistbox.Items.Add(_podatak);
}
I didn't test, but I think you are missing one detail, and doing a little mistake.
First: you need to bind a List to a ListBox. So, I believe you should do something like this:
List<podatak> myList = new List<podatak>();
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
myList.Add(_podatak);
}
mylistbox.ItemsSource = myList;
And Second: add this on xaml:
<ListBox Name="mylistbox" ItemsSource="{Binding}" ...
Correcting:
As commented, doesn't need change anything on your XAML code.
My mistake.
i populated some text ( i name them as questions) from database but in my wrap panel i can only display 3 questions , the rest of the questions are being cut-off , i have more than 3 questions , how can i do a paging in wrap panel to display the rest of the question on the panel itself? i populate the questions by for loop like this:
for( int i= 0 ; i<lstQuestion.Count()-2; i++)
{
TextBlock tb = new TextBlock(); // Question
tb.FontSize = 19;
tb.FontWeight = FontWeights.Bold;
tb.Text = lstQuestion[i].QuestionContent;
tb.TextWrapping = TextWrapping.Wrap;
wrapPanel1.Children.Add(tb);
TextBox tbox = new TextBox();
if (lstQuestion[i].Answer.Trim().Length > 0) // Textbox for user to input answer in every question
{
tbox.FontSize = 19;
tbox.Width = 250;
tbox.Height = 50;
tbox.PreviewDrop += new DragEventHandler(tbox_PreviewDrop);
tbox.Focusable = false; // Disallow user to input anything into it.
wrapPanel1.Children.Add(tbox);
}
answers.Add(lstQuestion[i].Answer);
if (lstQuestion[i].QuestionNo != lstQuestion[i + 1].QuestionNo) // add spacing between question
{
StackPanel sp = new StackPanel();
sp.Width = 1010;
wrapPanel1.Children.Add(sp);
Label spacing = new Label();
spacing.Width = 1010;
spacing.Content = "";
wrapPanel1.Children.Add(spacing);
}
} // end of for each loop.
And in my xaml :
<Grid>
<WrapPanel HorizontalAlignment="Center" Name="wrapPanel1" VerticalAlignment="Center" Height="400" Width="1038" Margin="0,77,0,43" />
<WrapPanel Height="80" HorizontalAlignment="Center" Name="wrapPanel2" VerticalAlignment="Top" Background="Aquamarine" Width="1000">
</WrapPanel>
<Button Content="Check" Height="37" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Bottom" Width="90" FontSize="24" Margin="474,0" Click="button1_Click" />
</Grid>
Wrappanel1 is where i put my questions and textbox ( wrap panel 1 is the panel that i want to do paging in ) , wrappanel2 is another panel where choices of answers are there.
As you can see from the grey arrow , there is still more text , but it just stops there at the end of the scroll.
Put your wrapPanel1 inside a ScrollViewer.
<ScrollViewer VerticalAlignment="Center" HorizontalAlignment="Center" Height="400" Width="1038">
<WrapPanel Name="wrapPanel1" />
</ScrollViewer>
Try arranging your UI in XAML with RowDefinitions
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0" HorizontalAlignment="Center" Name="wrapPanel2" Background="Aquamarine" Width="1000"></WrapPanel>
<ScrollViewer Grid.Row="1" Height="400" Width="1038" CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<WrapPanel Name="wrapPanel1"/>
</ScrollViewer>
<Button Grid.Row="2" Content="Check" Margin="5" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Bottom" Width="90" FontSize="24" Click="button1_Click" />
</Grid>
I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.
Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>
You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.
I'm trying to create a grid programmatically and appending a custom control as a child to the grid as row 0 column 0 out of a 2x2 matrix. To make matters more tricky, I'm using the MVVM design pattern. Heres some code to help everyone get the idea:
App.xaml.cs
base.OnStartup(e);
var viewModel = new MainWindowViewModel();
var mainWindow = new MainWindow();
mainWindow.GridWindows = viewModel.Window.GridWindows;
MainWindowViewModel - method returns the GridWindows.
private Grid CreateGrid()
{
Grid grid = new Grid();
// Create column definitions.
ColumnDefinition columnDefinition1 = new ColumnDefinition();
ColumnDefinition columnDefinition2 = new ColumnDefinition();
columnDefinition1.Width = new GridLength(640);
columnDefinition2.Width = new GridLength(640);
// Create row definitions.
RowDefinition rowDefinition1 = new RowDefinition();
RowDefinition rowDefinition2 = new RowDefinition();
rowDefinition1.Height = new GridLength(340);
rowDefinition2.Height = new GridLength(340);
// Attached definitions to grid.
grid.ColumnDefinitions.Add(columnDefinition1);
grid.ColumnDefinitions.Add(columnDefinition2);
grid.RowDefinitions.Add(rowDefinition1);
grid.RowDefinitions.Add(rowDefinition2);
// Create preview window.
Border border = new Border();
border.BorderThickness = new Thickness(20);
border.Padding = new Thickness(8);
border.SetResourceReference(Control.BackgroundProperty, "PreviewWindow");
MediaRTSPElement previewElement = new MediaRTSPElement();
previewElement.Name = "RTSPStreamPlayer";
previewElement.Stretch = Stretch.UniformToFill;
previewElement.Source = "rtsp://192.100.100.22/media/video1";
previewElement.VideoRenderer = VideoRendererType.EnhancedVideoRenderer;
previewElement.LoadedBehavior = WPFEVR.DirectShow.Players.MediaState.Play;
previewElement.SpeedRatio = 0.5;
//border.Child = previewElement;
// Add preview window.
for (int i = 0; i < 4; i++)
{
grid.Children.Add(previewElement as UIElement);
Grid.SetColumn(previewElement, i);
Grid.SetRow(previewElement, i);
break;
}
return grid;
}
And the XAML Markup that the grid should assign to
<Grid x:Name="GridWindows"></Grid>
The problem is my custom control does not appear in the grid layout, heres the xaml code that does it without code-behind, and this does work:
<Grid x:Name="GridWindows">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="640" />
<ColumnDefinition Width="640" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="340" />
<RowDefinition Height="340" />
</Grid.RowDefinitions>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer2"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer3"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer4"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>-->
</Grid>
Any ideas as to why programmatic code isn't working?
if you're creating Grid in the xaml you can't later set it in code. Grid (instance) is already in visualtree. Overwriting variable won't do any effect. You should set your Grid as content of xaml defined control. I'm guessing that your code looks like this:
Code:
this.GridWindows = createdGrid;
Xaml:
<Grid x:Name="GridWindows"></Grid>
In code you should have something like this:
this.GridWindows.Children.Add(createdGrid);