Develop Reference

How to prevent vertical scroll bar to lap my stack panels wpf

I am wondering how could I prevent vertical scroll bar from lapping my stack panels.
I am working on small wpf app where customers can add articles(drinks) to a something like cart, and when user click on article its added to the right part of window in stack panel, this is how it looks a like:
But I have problem when I add more than lets say 5-6 items to my stack panel, than vertical scroll bar is appearing and this is what's happening (notice vertical scroll bar to the right) its laping "x1":
How could I prevent this guy? Is it possible to move content to the left or something like that without laping my items/articles ...
If the code of how I add items to stackPanel is needed, I will post it in a sec?
HERE IS MY FULL CODE ABOUT THIS PART:
public MyDrinksPanel(int id, int groupID, double price,double priceHappy, string text, int fontSize, int numberSize, int buttonWidth, int buttonHeight, int margin, Thickness border, byte[] image)
: base()
{
this.Width = buttonWidth+90;
this.Height = buttonHeight;
image.Source = GetimageFromByte(image);
ID = id;
groupID = groupID;
price = price;
priceHappy = priceHappy;
DugmePanel.HorizontalAlignment = HorizontalAlignment.Center;
DugmePanel.VerticalAlignment = VerticalAlignment.Center;
DugmePanel.Orientation = Orientation.Horizontal;
DugmePanel.MaxWidth = DugmePanel.Width = buttonWidth;
//DugmePanel.Height = 70;
DugmePanel.Height = DugmePanel.MaxHeight = this.Height;
BrushConverter MyBrush = new BrushConverter();
DugmePanel.Background = (Brush)MyBrush.ConvertFrom("#50000000");
_image.Width = 120;
_image.Height = buttonHeight;
_image.HorizontalAlignment = HorizontalAlignment.Left;
_image.VerticalAlignment = VerticalAlignment.Center;
BrushConverter MyBrush2 = new BrushConverter();
RightNumberPanel.HorizontalAlignment = HorizontalAlignment.Right;
RightNumberPanel.VerticalAlignment = VerticalAlignment.Center;
RightNumberPanel.Orientation = Orientation.Horizontal;
RightNumberPanel.Width = RightNumberPanel.MaxWidth = this.Width - DugmePanel.Width;
RightNumberPanel.Height = RightNumberPanel.MaxHeight = this.Height;
NumberLabel.FontFamily = Util.Font; //new System.Windows.Media.FontFamily("HelveticaNeueLTStd-Bd.otf#Helvetica Neue LT Std");
ArticleNameLabel.VerticalContentAlignment = VerticalAlignment.Center;
ArticleNameLabel.HorizontalContentAlignment = HorizontalAlignment.Left;
ArticleNameLabel.FontSize = fontSize;
ArticleNameLabel.Foreground = System.Windows.Media.Brushes.White;
ArticleNameLabel.MaxWidth = _image.Width+45; //- 3;
ArticleNameLabel.FontFamily = Util.Font;//new System.Windows.Media.FontFamily("HelveticaNeueLTStd-Bd.otf#Helvetica Neue LT Std");
NumberLabel.Height = NumberLabel.MaxHeight = this.Height;
NumberLabel.FontSize = numberSize;
NumberLabel.Margin = new Thickness(0, 0, 0, 0);
NumberLabel.VerticalAlignment = VerticalAlignment.Center;
NumberLabel.HorizontalAlignment = HorizontalAlignment.Right;
NumberLabel.HorizontalContentAlignment = HorizontalAlignment.Right;
NumberLabel.Foreground= System.Windows.Media.Brushes.White;
NumberLabel.FontWeight = FontWeights.Bold;
BrushConverter MyBrush3 = new BrushConverter();
NumberLabel.Background = (Brush)MyBrush3.ConvertFrom("#83D744");
NumberLabel.Foreground = new SolidColorBrush(Colors.Black);
ArticleNameLabel.Content = text;
NumberLabel.Content = "x1";
DugmePanel.Children.Add(image);
DugmePanel.Children.Add(ArticleNameLabel);
RightNumberPanel.Children.Add(NumberLabel);
Rectangle rct = new Rectangle();
rct.Fill = System.Windows.Media.Brushes.White;
rct.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
rct.Height = 2;
//rct.Width = 100;
_animations = new DoubleAnimation(numberSize, numberSize + 15, new Duration(new TimeSpan(0, 0, 0, 0, 300)));
_animations.AutoReverse = true;
this.Margin = border;
this.Orientation = Orientation.Horizontal;
StackPanel spNew = new StackPanel();
spNew.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
spNew.Orientation = System.Windows.Controls.Orientation.Horizontal;
spNew.Children.Add(DugmePanel);
spNew.Children.Add(RightNumberPanel);
StackPanel spNew2 = new StackPanel();
spNew2.Orientation = System.Windows.Controls.Orientation.Vertical;
spNew2.Children.Add(spNew);
this.Children.Add(spNew2);
}
I dont have a lot about XAML HERE:
This is only part:
<ScrollViewer x:Name="ScrollerOnTheRight" Margin="0,0,0,60" HorizontalScrollBarVisibility="Disabled" Grid.Row="1" Grid.Column="2" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Grid.Row="1" x:Name="stackRacun" Grid.Column="2"/>
</ScrollViewer>
Thanks guys,
Cheers

c# Why stackpanel don't resize?

I am using silverlight and have to code in c# not xaml and i have a grid (myGrid) with 1 row and 1 column. This Grid further contain Border(rect) and this rect contains another grid (childGrid)inside having 1 row and 3 columns.
And this smallGrid further contains a stackpanel (sp) in second column whose size formed dynamically but smallGrid dont resize according to the growing size of stackpanel sp.
My code is like this:
Grid myGrid = new Grid();
myGrid.Width = 750;
myGrid.HorizontalAlignment = HorizontalAlignment.Left;
myGrid.VerticalAlignment = VerticalAlignment.Top;
myGrid.ShowGridLines = false;
ColumnDefinition colDef1 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(colDef1);
RowDefinition rowDef1 = new RowDefinition();
myGrid.RowDefinitions.Add(rowDef1);
Border rect = new Border();
rect.Width = g.Width;
rect.Height = g.Height;
rect.BorderThickness = new Thickness(2);
rect.BorderBrush = new SolidColorBrush(Colors.LightGray);
Grid childGrid = new Grid();
ColumnDefinition colDef1 = new ColumnDefinition();
ColumnDefinition colDef2 = new ColumnDefinition();
ColumnDefinition colDef3 = new ColumnDefinition();
childGrid.ColumnDefinitions.Add(colDef1);
childGrid.ColumnDefinitions.Add(colDef2);
childGrid.ColumnDefinitions.Add(colDef3);
int NumberOfRadioButton = 0;
StackPanel sp = new StackPanel();
foreach(var item in param.Component.Attributes.Items) {
NumberOfRadioButton++;
RadioButton rb = new RadioButton();
rb.GroupName = item;
rb.Content = item;
sp.Children.Add(rb);
}
Grid.SetRow(sp, 1);
Grid.SetColumn(sp, 1);
childGrid.Height = sp.Height;
childGrid.Children.Add(sp);
TextBlock txtblk1ShowStatus = new TextBlock();
TextBlock txtblkLabel = new TextBlock();
txtblkLabel.Text = param.Label;
Grid.SetColumn(txtblkLabel, 0);
Grid.SetRow(txtblkLabel, 1);
childGrid.Children.Add(txtblkLabel);
txtblk1ShowStatus.Text = param.Name;
Grid.SetColumn(txtblk1ShowStatus, 2);
Grid.SetRow(txtblk1ShowStatus, 1);
childGrid.Children.Add(txtblk1ShowStatus);
rect.Child = childGrid;
Grid.SetRow(rect, 1);
myGrid.Children.Add(rect);
The size of myGrid and childGrid must grow dynamically according to the increasing stackpanel size on dynamically created radio buttons? Because all the radio buttons are not displayed in column 2 please see the last radiobutton in snapshot belowis not displayed because of border crossing ("Very High", just after "High"):
EDIT: I even tried these 3 steps but it still the same:
(1)Remove rect.Width = g.Width; rect.Height = g.Height; childGrid.Height = sp.Height;
(2)add rowdef.Height= new GridLength(1, GridUnitType.Auto);(because i am expanding vertically)
(3) add sp.Orientation = Orientation.Vertical;
Edit2 : myGrid is liek this:
Grid myGrid = new Grid();
myGrid.Width = 750;
myGrid.HorizontalAlignment = HorizontalAlignment.Left;
myGrid.VerticalAlignment = VerticalAlignment.Top;
myGrid.ShowGridLines = false;
ColumnDefinition colDef1 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(colDef1);
int totalRows = p.Parameter.Count() + p.Separator.Count();
for (int i = 0; i < totalRows; i++)
{
myGrid.RowDefinitions.Add(new RowDefinition());
}
EDIT3: (my changed code after bit's suggestion)
Border rect = new Border();
// rect.Width = g.Width;
// rect.Height = g.Height;
rect.BorderThickness = new Thickness(2);
rect.BorderBrush = new SolidColorBrush(Colors.LightGray);
Grid childGrid = new Grid();
ColumnDefinition colDef1 = new ColumnDefinition();
ColumnDefinition colDef2 = new ColumnDefinition();
ColumnDefinition colDef3 = new ColumnDefinition();
RowDefinition rowdef = new RowDefinition();
childGrid.ColumnDefinitions.Add(colDef1);
childGrid.ColumnDefinitions.Add(colDef2);
childGrid.ColumnDefinitions.Add(colDef3);
childGrid.RowDefinitions.Add(rowdef);
rowdef.Height= new GridLength(1, GridUnitType.Auto);
int NumberOfRadioButton =0;
StackPanel sp = new StackPanel();
sp.Orientation = Orientation.Vertical;
foreach (var item in param.Component.Attributes.Items)
{
NumberOfRadioButton++;
RadioButton rb = new RadioButton();
rb.GroupName = item;
rb.Content = item;
sp.Children.Add(rb);
}
Grid.SetRow(sp, LoopCount);
Grid.SetColumn(sp, 1);
childGrid.ShowGridLines = true;
// rect.Height = double.NaN;
childGrid.Children.Add(sp);
TextBlock txtblk1ShowStatus = new TextBlock();
TextBlock txtblkLabel = new TextBlock();
txtblkLabel.VerticalAlignment = System.Windows.VerticalAlignment.Center;
txtblkLabel.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
txtblkLabel.TextAlignment = System.Windows.TextAlignment.Center;
txtblkLabel.FontWeight = FontWeights.Bold;
txtblkLabel.FontSize = 15;
txtblkLabel.FontStyle = FontStyles.Normal;
txtblkLabel.Padding = new Thickness(5, 10, 5, 10);
txtblkLabel.Text = param.Label;
Grid.SetColumn(txtblkLabel, 0);
Grid.SetRow(txtblkLabel, LoopCount);
childGrid.Children.Add(txtblkLabel);
txtblk1ShowStatus.VerticalAlignment = System.Windows.VerticalAlignment.Center;
txtblk1ShowStatus.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
txtblk1ShowStatus.TextAlignment = System.Windows.TextAlignment.Center;
txtblk1ShowStatus.FontWeight = FontWeights.Bold;
txtblk1ShowStatus.FontSize = 15;
txtblk1ShowStatus.FontStyle = FontStyles.Normal;
txtblk1ShowStatus.Padding = new Thickness(5, 10, 5, 10);
txtblk1ShowStatus.Text = param.Name;
Grid.SetColumn(txtblk1ShowStatus, 2);
Grid.SetRow(txtblk1ShowStatus, LoopCount);
childGrid.Children.Add(txtblk1ShowStatus);
rect.Child = childGrid;
Grid.SetRow(rect, LoopCount);
myGrid.Children.Add(rect);

There a bunch of things you need to consider here..
In case you want a Horizontally expanding smallGrid, set the
sp.Orientation=Orientation.Horizontal
Then set the widths of the columns in smallGrid to Auto.
colDef.Width = new GridLength(1, GridUnitType.Auto); // Auto
You don't really need the myGrid, directly using the Border should suffice.
Get rid of assigning the Height s eg:
rect.Width = g.Width;
rect.Height = g.Height;
childGrid.Height = sp.Height;
Else, if you wanted a vertically expanding smallGrid, make sure the parent of the Border rect (or myGrid, in case you decide to keep it), allows for expansion Height (mostly check that height is not hard coded to a fix number or something)
Also, set the
smallGrid.ShowGridLines = true;
to give you a better idea in regards to what is actually taking up the space.
Lastly, do this too
int totalRows = p.Parameter.Count() + p.Separator.Count();
for (int i = 0; i < totalRows; i++)
{
var rowDef=new RowDefinition();
rowdef.Height = new GridLength(1, GridUnitType.Auto);
myGrid.RowDefinitions.Add(rowDef);
}

StackPanel margin issue

When I set a Margin from the Top to 15 for the TextBox:
x.Margin = new Thickness(100, 15, 0, 0);
This works fine and everything it ok, but then I want to make a ComboBox also appear 15px from the top - it doesn't work.
y.Margin = new Thickness(0, 15, 0, 0);
This is the code for the button I click to create the ComboBox and the TextBox:
int t = 0;
private void btnAddTitle_Click(object sender, RoutedEventArgs e)
{
TextBox x = new TextBox();
x.Name = "Title" + t;
x.Text = "Title...";
x.FontWeight = FontWeights.Bold;
x.FontStyle = FontStyles.Italic;
x.TextWrapping = TextWrapping.Wrap;
x.Height = 25;
x.Width = 200;
x.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
x.Margin = new Thickness(100, 15, 0, 0);
spStandard.Children.Add(x);
ComboBox y = new ComboBox();
y.Name = "Combo" + t;
y.Text = (t + 1).ToString();
y.Height = 25;
y.Width = 45;
y.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
y.Margin = new Thickness(0, 15, 0, 0);
spStandard.Children.Add(y);
t++;
}
Here is a picture of what happens when I run the application - it shows where the ComboBox gets put:

Here is a solution for your problem, you shouldn't create controls in code behind but it will get the job done:
int t = 0;
private void btnAddTitle_Click(object sender, RoutedEventArgs e)
{
//a new stackpanel is used to arrange items Horizontally for each line
StackPanel sp = new StackPanel() { Orientation = Orientation.Horizontal };
TextBox x = new TextBox();
x.Name = "Title" + t;
x.Text = "Title...";
x.FontWeight = FontWeights.Bold;
x.FontStyle = FontStyles.Italic;
x.TextWrapping = TextWrapping.Wrap;
x.Height = 25;
x.Width = 200;
x.Margin = new Thickness(0, 15, 0, 0);
ComboBox y = new ComboBox();
y.Name = "Combo" + t;
y.Text = (t + 1).ToString();
y.Height = 25;
y.Width = 45;
y.Margin = new Thickness(0, 15, 0, 0);
sp.Children.Add(y);
sp.Children.Add(x);
spStandard.Children.Add(sp);
t++;
}

Cannot access dynamic controls

I have some trouble when i'm trying to click my dynamic controls in StackPanel.
I'm adding controls to Grid in this way...
void Opt()
{
TextBlock Title_1 = new TextBlock();
TextBlock Title_2 = new TextBlock();
CheckBox Kwota_exists = new CheckBox();
TextBox Title = new TextBox();
StackPanel Frame = new StackPanel();
Button OK = new Button();
Title_1.Text = "Dodaj kategorię";
Title_2.Text = "Aktywne kategorię";
Kwota_exists.Content = "Stała kwota?";
Title.Text = "Nazwa kategorii";
OK.Content = "Dodaj";
OK.IsEnabled = true;
OK.IsHitTestVisible = true;
OK.IsTabStop = true;
OK.ClickMode = ClickMode.Release;
Frame.IsHitTestVisible = true;
Kwota_exists.Checked +=Kwota_exists_Checked;
Title_1.FontSize = 50;
Title_2.FontSize = 50;
Title.FontSize = 20;
Frame.Height = 100;
Frame.Width = 400;
Title_1.Margin = new Thickness(0, 0, 0, 0);
Title_2.Margin = new Thickness(0, 220, 0, 0);
Frame.Margin = new Thickness(0, 70, 0, 0);
Frame.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
Frame.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;
Frame.Orientation = Orientation.Horizontal;
Frame.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(145, 56, 234, 21));
Frame.Children.Add(Kwota_exists);
Frame.Children.Add(Title);
Frame.Children.Add(OK);
GrdContent.Children.Add(Frame);
GrdContent.Children.Add(Title_1);
GrdContent.Children.Add(Title_2);
}
But when i'm trying to click button or check checkbox controls doesn't seem to response (unclickable).
Looks like i can't access them or i'm doing something wrong. I would be gradefull if someone explain me where i'm doing mistake.

only the first listpicker opens windows phone

I am using Windows Phone Toolkit - Nov 2011 (7.1 SDK) and I want to display multiple listpickers each
within a grid and each grid in a listbox. The problem is, only the first listpicker pops open and the rest don't. secondly how do I customize the full mode page of the listpicker to be displayed exclusively in Landscape orientation and set the page's "shell:SystemTray.IsVisible" to false.
Sorry I couldn't post a screenshot. error "Earn more than 10 reputation to post images".
Thanks
public MainPage()
{
InitializeComponent();
for (int g = 0; g < 10; g++)
{
// Define the margins template dor elements
Thickness elemThick = new Thickness();
// Create the Grid that will hold all the elements of a single entry
Grid entryGrd = new Grid();
entryGrd.VerticalAlignment = VerticalAlignment.Top;
entryGrd.HorizontalAlignment = HorizontalAlignment.Left;
elemThick.Left = 0;
elemThick.Bottom = 0;
elemThick.Right = 0;
elemThick.Top = 0;
entryGrd.Margin = elemThick;
entryGrd.Tag = lstbxPH.Items.Count;
// Setup the backgound value of the letBoder element
LinearGradientBrush elemLGB = new LinearGradientBrush();
elemLGB.EndPoint = new Point(0.5, 1);
elemLGB.StartPoint = new Point(0.5, 0);
GradientStop AquamarineGS = new GradientStop();
AquamarineGS.Color = Color.FromArgb(255, 127, 255, 212);
AquamarineGS.Offset = 0;
GradientStop greenLikeGS = new GradientStop();
greenLikeGS.Color = Color.FromArgb(255, 101, 250, 193);
greenLikeGS.Offset = 0.988;
elemLGB.GradientStops.Add(AquamarineGS);
elemLGB.GradientStops.Add(greenLikeGS);
// Draw the letter
for (int x = 0; x < 9; x++)
{
Border letBoder = new Border();
letBoder.Width = 53;
letBoder.Height = 51;
letBoder.VerticalAlignment = VerticalAlignment.Top;
letBoder.HorizontalAlignment = HorizontalAlignment.Left;
elemThick.Left = x * 60 + 71;
elemThick.Top = lstbxPH.Items.Count * 1 + 20;
letBoder.Margin = elemThick;
letBoder.Background = elemLGB;
// The Texblock
TextBlock let = new TextBlock();
let.VerticalAlignment = VerticalAlignment.Center;
let.HorizontalAlignment = HorizontalAlignment.Center;
let.FontSize = 25;
let.FontWeight = FontWeights.Bold;
let.Foreground = new SolidColorBrush(Color.FromArgb(200, 255, 255, 255));
let.Text = x.ToString();
let.Tag = x;
letBoder.Child = let;
entryGrd.Children.Add(letBoder);
}
// Draw the List picker element for the draw types
ListPicker DType = new ListPicker();
DType.Width = 48;
DType.VerticalAlignment = VerticalAlignment.Top;
DType.HorizontalAlignment = HorizontalAlignment.Left;
DType.Background = new SolidColorBrush(Color.FromArgb(200, 255, 255, 255));
DType.BorderBrush = new SolidColorBrush(Color.FromArgb(200, 255, 255, 255));
elemThick.Left = 17;
elemThick.Top = lstbxPH.Items.Count * 1 + 10;
DType.Margin = elemThick;
DType.FontSize = 18;
ListPickerItem item1 = new ListPickerItem() { Content = "A" };
ListPickerItem item2 = new ListPickerItem() { Content = "B" };
ListPickerItem item3 = new ListPickerItem() { Content = "C" };
DType.Items.Add(item1);
DType.Items.Add(item2);
DType.Items.Add(item3);
entryGrd.Children.Add(DType);
if (lstbxPH.Items.Count != 0)
{
// The delete button and related image
Button btnDel = new Button();
btnDel.Height = 65;
btnDel.Width = 60;
btnDel.Tag = lstbxPH.Items.Count;
btnDel.VerticalAlignment = VerticalAlignment.Top;
btnDel.HorizontalAlignment = HorizontalAlignment.Left;
btnDel.VerticalContentAlignment = VerticalAlignment.Top;
btnDel.HorizontalContentAlignment = HorizontalAlignment.Left;
elemThick.Left = 600;
elemThick.Top = lstbxPH.Items.Count + 13;
btnDel.Margin = elemThick;
elemThick.Left = 0;
elemThick.Bottom = 0;
elemThick.Right = 0;
elemThick.Top = 0;
btnDel.Name = "btnDel";
btnDel.Padding = elemThick;
btnDel.BorderBrush = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Image imgDel = new Image();
imgDel.Source = new BitmapImage(new Uri("/appbar.delete.rest.png", UriKind.RelativeOrAbsolute));
imgDel.VerticalAlignment = VerticalAlignment.Top;
imgDel.HorizontalAlignment = HorizontalAlignment.Left;
imgDel.Height = 35;
imgDel.Width = 30;
elemThick.Left = 0;
elemThick.Bottom = 0;
elemThick.Right = 0;
elemThick.Top = 0;
imgDel.Margin = elemThick;
imgDel.Stretch = Stretch.UniformToFill;
btnDel.Content = imgDel;
entryGrd.Children.Add(btnDel);
}
// Add the grid with to the list box
this.lstbxPH.Items.Add(entryGrd);
}
}

This issue was actually solved by the Windows Phone Toolkit - Nov 2011 (7.1 SDK).
Here is how I worked it out.
Download the November release of the toolkit http://silverlight.codeplex.com/releases/view/75888
if you had a previous release of the toolkit installed, please uninstall it and unreferenced the tool kit on you project
Install the November release of the toolkit
Reference the toolkit on your project, debug and boom! it woks.