We Keep Coding

Get control inside DataTemplate

So I have a FlipView defined in xaml by the following code:
<FlipView x:Name="carrousel" Height="175" Background="Transparent" Margin="0,20,0,0">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Rectangle x:Name="profile" Stroke="White" StrokeThickness="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="175" Height="175" Canvas.ZIndex="1" RadiusX="88" RadiusY="88" Tapped="profile_Tapped"/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
When a user clicks on the rectangle, it's animated to become bigger, but I also want all the other rectangles of every other FlipViewItem to change size too. How can I achieve this? I tried:
foreach(FlipViewItem fvi in carrousel.Items)
{
Rectangle g = (fvi.Content as Grid).FindName("profile") as Rectangle;
g.Width = double;
g.Height = double;
}
But seeing as my flipview doesn't contain FlipViewItems but custom classes I've binded to it (which obviously have no .Content), it doesn't work. How can I get this to work?

foreach(var fvi in carrousel.Items)
{
FlipViewItem item=carrousel.ContainerFromItem(fvi);
var rectangle =FindElementInVisualTree<Rectangle>(item);
//Or without VisualTreeHelper you can do like what were you trying before
Rectangle g = (item.Content as Grid).FindName("profile") as Rectangle;
g.Width = double;
g.Height = double;
}
private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0) return null;
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
return (T)child;
else
{
var result = FindElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
return null;
}

This solution is a turn around solution (because I could not manage the relative binding).
<Grid Background="{ThemeResource SystemControlBackgroundListMediumBrush}">
<StackPanel Margin="100,10,10,10">
<FlipView x:Name="carrousel" Height="350" Width="350" Background="Red" Margin="0,20,0,0">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Rectangle x:Name="profile" Stroke="White" StrokeThickness="1" Fill="Aqua"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="{Binding ElementName=RefValueRect, Path=Width, Mode=OneWay}"
Height="{Binding ElementName=RefValueRect, Path=Height, Mode=OneWay}" Canvas.ZIndex="1" RadiusX="88"
RadiusY="88" Tapped="profile_Tapped"/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</StackPanel>
<Rectangle x:Name="RefValueRect" Width="175" Height="175" Visibility="Collapsed" />
</Grid>
code behind
private void profile_Tapped(object sender, TappedRoutedEventArgs e)
{
RefValueRect.Width *= 2;
RefValueRect.Height *= 2;
}

C# WPF vertical listBox not showing vertical scrollbar

I have a listBox with some elements in it.
<StackPanel Orientation="Vertical" Grid.Row="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock x:Name="lbGroups" Text="PartPrograms Groups" FontSize="{StaticResource TEXTBOX_TITLE_FONTSIZE}" FontWeight="Bold" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="1"/>
<Button x:Name="btAddGroup" Content="" FontSize="{StaticResource TEXTBOX_BIGBUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click"/>
<Button Name="btDeleteGroup" Content="" FontSize="{StaticResource TEXTBOX_BIGBUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click"/>
<Button x:Name="btGroupDown" Content="" FontSize="{StaticResource TEXTBOX_BIGBUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click"/>
<Button Name="btGroupUp" Content="" FontSize="{StaticResource TEXTBOX_BIGBUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click"/>
</StackPanel>
<ListBox Name="lbPPgroups" Background="{x:Null}" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox> <------- this is the listbox
</StackPanel>
The elements are programmatically added to the listBox with this:
void AddNewPartProgramGroup(String strContent, String strNotes, String strPathImage, bool IsChecked=false)
{
StackPanel sp = new StackPanel();
string currentDir = AppDomain.CurrentDomain.BaseDirectory.ToString();
ToggleButton toggleButton = new ToggleButton()
{
Content = strContent,
Height = IMAGES_ROW_HEIGHT / GOLDEN_RATIO,
Width = IMAGES_ROW_HEIGHT,
FontSize = 10,
Background = null,
Tag = "bt" + strContent,
ToolTip = strNotes,
Margin = new Thickness(BUTTON_MARGIN),
IsChecked = IsChecked
};
toggleButton.Click += new RoutedEventHandler(ToggleButton_Click);
sp.Children.Add(toggleButton);
Image newResizedImage = ImageUtilities.StrPath2ResizedImageSizeHeight(strPathImage, IMAGES_ROW_HEIGHT);
sp.Children.Add(newResizedImage);
sp.Orientation = Orientation.Horizontal;
sp.HorizontalAlignment = HorizontalAlignment.Left;
this.lbPPgroups.Items.Add(sp);<------ here I add elements
var newGroup = new PcDmisData.Group();
newGroup.Description = strContent;
var newImage = new PcDmisData.MyImage();
newImage.Image = newResizedImage;
newImage.IsImageEmbedded = false;
newGroup.myImage = newImage;
newGroup.Notes = strNotes;
EasyRunData.lstPPgroups.Add(newGroup);
}
the problem is after adding some elements I can't see the vertical scrollbar on the listbox:
I also tried to add a vertical scroll viewer but that didn't work.
Thanx for any help
PAtrick

So the problem is that the outer StackPanel has no real MaxHeight and the Height updates automatically. The ScrollBar only appears if this Panel reaches a certain limit in its heigth. To solve this you could play around with MaxHeight...
I would recommend to use a DockPanel.
<Grid>
<DockPanel Grid.Row="0" >
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock x:Name="lbGroups" Text="PartPrograms Groups" FontWeight="Bold" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"/>
<Button Name="btGroupUp" Click="btGroupUp_Click" Margin="2,2,2,2" Width="30"/>
</StackPanel>
<ListBox Name="lbPPgroups" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</DockPanel>
</Grid>
Just for the example in code behind:
private void btGroupUp_Click(object sender, RoutedEventArgs e)
{
for (var i=1;i<50;i++)
{
TextBox box = new TextBox();
box.Text = "Hello World " + i ;
lbPPgroups.Items.Add(box);
}
}
In this example i set ScrollViewer.VerticalScrollBarVisibility="Auto" so the ScrollBar only appears when it is needed. But you can also set it to "Visible".

Windows phone Listbox not working properly when there are lots of items

I am using Listbox in windows phone 8 to show a dynamic list and i want to select the ListItem in edit mode and by selecting means i show img in the list. Which i am able to do. but when i scroll the list, items which i have selected are changed. Some other item is selected. this is a random behaviour.
Below is my code.
<ListBox x:Name="lstbxReg"
Margin="0 130 0 0"
Tap="lstbxReg_Tap"
VirtualizingStackPanel.VirtualizationMode="Standard"
>
<ListBox.ItemTemplate >
<DataTemplate>
<Border BorderThickness="1"
BorderBrush="{Binding BorderColor}"
Margin="0 0 0 5"
Tag="lstRegBorder">
<StackPanel Width="380"
Tag="{Binding ID}" >
<TextBlock Text="Date:"
Foreground="Black"
FontWeight="SemiBold"
FontSize="20"
Padding="15 0 0 0"
Width="150"
Margin="0 0 0 -30"
HorizontalAlignment="Left"/>
<!--/Assets/1.png-->
<Image x:Name="LstImg"
Source="{Binding ImgURL}"
Tag="{Binding ID}"
Width="30" Height="25"
Margin="0 5 10 0"
Loaded="LstImg_Loaded"
VirtualizingStackPanel.VirtualizationMode="Standard"
HorizontalAlignment="Right"/>
<TextBlock x:Name="txtdate"
Text="{Binding Date}"
Foreground="Black"
FontSize="16"
Margin="0 -30 30 0"
Width="160"
FontWeight="SemiBold"
HorizontalAlignment="Right"/>
<TextBlock Text="Type:"
Foreground="Black"
FontSize="16"
Padding="15 0 0 0"
Width="150"
HorizontalAlignment="Left"/>
<TextBlock x:Name="txtType"
Text="{Binding Category}"
Foreground="Black"
FontSize="16"
Margin="0 -25 50 0"
Width="140"
HorizontalAlignment="Right"/>
<TextBlock Text="SMS No:"
Foreground="Black"
FontSize="16"
Padding="15 0 0 0"
Width="150"
HorizontalAlignment="Left"/>
<TextBlock x:Name="txtSmsno"
Text="{Binding CustomerSMSNo}"
Foreground="Black"
FontSize="16"
Margin="0 -25 50 0"
Width="140"
HorizontalAlignment="Right"/>
<TextBlock Text="Customer:"
Foreground="Black"
FontSize="16"
Padding="15 0 0 0"
Width="150"
HorizontalAlignment="Left"/>
<TextBlock x:Name="txtCust"
Text="{Binding CustomerInfo}"
Foreground="Black"
FontSize="16"
Margin="0 -25 50 0"
Width="140"
HorizontalAlignment="Right"/>
<TextBlock Text="Duration:"
Foreground="Black"
FontSize="16"
Padding="15 0 0 0"
Width="150"
HorizontalAlignment="Left"/>
<TextBlock x:Name="txtDuration"
Text="{Binding Total}"
Foreground="Black"
FontSize="16"
Margin="0 -25 50 0"
Width="140"
HorizontalAlignment="Right"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
******Code *****
public void bind()
{
List<Class> lst = new List<Class>();
for (int i = 1; i < 20; i++)
{
lst.Add(new Class
{
ID = i,
BorderColor = "Green",
URL = "/Assets/1.png",
Date = DateTime.Today.ToString(),
Category = "wr",
CustomerSMSNo = "134578",
CustomerInfo = "asd",
Total = "12"
});
}
lstbxReg.ItemsSource = lst;
}
private void lstbxReg_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
var selectedItemList = (Class)lstbxReg.SelectedItem;
position = lstbxReg.SelectedIndex;
var selected = (Class)lstbxReg.SelectedItem;
if (selected.imgURL == "/Assets/1.png")
{
selected.imgURL = "/Assets/checkbox_Filled_green.png";
int index = lstImg.FindIndex(x => x.Tag.ToString() == selected.ID.ToString());
lstImg[index].Source = new BitmapImage(new Uri(selected.imgURL, UriKind.Relative));
}
else
{
selected.imgURL = "/Assets/1.png";
int index = lstImg.FindIndex(x => x.Tag.ToString() == selected.ID.ToString());
lstImg[index].Source = new BitmapImage(new Uri(selected.imgURL, UriKind.Relative));
}
lstbxReg.SelectedItem = null;
lstbxReg.SelectedIndex = 0;
}
private void LstImg_Loaded(object sender, RoutedEventArgs e)
{
Img = sender as Image;
int count = lstImg.FindAll(x => x.Tag.ToString() == Img.Tag.ToString()).Count;
if (count == 0)
{
lstImg.Add(Img);
}
}
Any help would be appreciated.

This is not a random thing.
Listbox uses data virtualization. It creates only limited count of those items, which are visible at the same time on screen. As you scroll down it reuses the item that is scrolled up and not visible anymore.
You are using data binding which is a good thing.
But you are making changes to the item of Listbox and not the source list which is bound. So make changes in the source list and Listbox will update correctly as long as Listbox receives change notifications.
The source list named lst, you should keep a reference to it to make changes.
P.S. Work on your naming conversions. A class with a name Class and mostly all naming mixed up makes it very hard to read.

BInding Dictionary to a grid

I am working on the Windows phone 8 application for the 1st time, and I am not that familiar with the controls and terms so please pardon me.
I have a windows phone 8 app which need to display a list of books ie: display book-title and book-desc in a list format.
I have used Windows phone DataBoundApp template for the project. I am trying to bind the grid with the database values.
Here is my code:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
using(Context c=new Context(Context.ConnectionString))
{
c.LogDebug = true;
char[] allchar = new char[4] { 'A', 'B','C','D' };
List<DB.Books> keys = new List<DB.Books>();
var exampleDictionary = new Dictionary<List<DB.Books>, string>();
for (int i = 0; i <= 3; i++)
{
var book = from m in c.Books
where m.Book_author.StartsWith(allchar[i].ToString())
orderby Convert.ToChar(m.Book_author)
select m;
keys.AddRange(book.ToList());
exampleDictionary.Add(book.ToList(), allchar[i].ToString());
}
MainLongListSelector.ItemsSource = exampleDictionary.ToList();
}
}
And Xaml source:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Path=Value}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Column="1"/>
<TextBlock Text="{Binding Path=Key[1].Book_author}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Grid.Column="2"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
Here I am trying to list the books in Alphabetical order, so the design should be as follows:
A:
book1-title,book1-desc
book2-title,book2-desc
book3-title,book3-desc
B:
book1-title,book1-desc
book2-title,book2-desc
book3-title,book3-desc
...
Please help me out. Thanks in advance.

WPF C# Paging in Wrap Panel

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>