Hey Guys I was just wandering if anyone can show me how to Programmatically change a ListBoxDataTemplate. So basically I have this DataTemplate:
<DataTemplate x:Key="DataTemplate1">
<Grid toolkit:TiltEffect.IsTiltEnabled="True" d:DesignWidth="446" Width="446" d:DesignHeight="108" Height="108">
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountTitle}" VerticalAlignment="Top" Width="456" HorizontalAlignment="Left" Height="40" FontFamily="Segoe WP" FontSize="28" />
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountUsername}" VerticalAlignment="Top" Width="456" Margin="0,33,0,0" HorizontalAlignment="Left" Height="35" FontFamily="Segoe WP" FontSize="24" />
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountWebsite}" VerticalAlignment="Top" Width="456" Margin="0,61,0,0" HorizontalAlignment="Left" Height="35" FontFamily="Segoe WP" FontSize="24" />
<TextBlock TextWrapping="NoWrap" Text="{Binding FolderID}" VerticalAlignment="Top" Width="456" Margin="0,96,0,-13" HorizontalAlignment="Left" Height="35" FontFamily="Segoe WP" FontSize="24" Opacity="0" Visibility="Collapsed" />
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountDate}" VerticalAlignment="Top" Margin="0,38,0,0" FontFamily="Segoe WP" FontSize="20" TextAlignment="Right" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
Now when the user sets a certain setting on the Settings page, The ListBox DataTemplate must change to this:
<DataTemplate x:Key="DataTemplate1">
<Grid toolkit:TiltEffect.IsTiltEnabled="True" d:DesignWidth="446" Width="446" d:DesignHeight="108" Height="108">
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountTitle}" VerticalAlignment="Top" Width="456" HorizontalAlignment="Left" Height="40" FontFamily="Segoe WP" FontSize="28" />
<TextBlock TextWrapping="NoWrap" Text="{Binding AccountDate}" VerticalAlignment="Top" Margin="0,38,0,0" FontFamily="Segoe WP" FontSize="20" TextAlignment="Right" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
Is it possble to do this? If so please someone help me.
Thanks!
One of many ways, define two DataTemplates in page Resources. Then you can set ListBox's ItemTemplate to any one of those two at run-time :
MyListBox.ItemTemplate = (DataTemplate)FindResource("DataTemplate2");
UPDATE :
Since, FindResource() function is not available in Windows Phone page, and as confirmed by OP this one works for him, so use following instead of above code :
MyListBox.ItemTemplate = (DataTemplate)this.Resources["DataTemplate2"];
Related
I'm using the Material Design in a WPF XAML application, I've got this section of code bellow, when the grid is outside of a "materialDesign:Flipper" it all renders correctly; ie- it grows/stretch's correctly with the size of the window and it stacks nicely inside of the StackPanel.
However, as soon as I place this code inside of a Flipper, the scaling and positioning becomes skewed. If I start to change the size of the window it will resize funnily and will not stack nicely. Please see both the image and video bellow for more info. Thank you.
Please note all this code is contained within side a "StackPanel", the intention is such that they can be copied and pasted multiple times.
Working Code outside a Flipper:
<Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
Broken Code, inside a Flipper:
<materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
<materialDesign:Flipper.FrontContent>
Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
</materialDesign:Flipper.FrontContent>
<materialDesign:Flipper.BackContent>
<Grid Height="200" Background="{Binding BackColour}">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
</Grid>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
Example Image of render
YouTube Video Demonstration - The one highlighted in red is flipper.
Thank you for any help.
I am looking for something like:
lv.Children.Add(e1);
But lv.children.add does not exist
<ListView x:Name="lv" Height="300" Margin="727,97,208,231" Grid.Row="1" >
<Grid Name="e1" Height="48" Width="417" >
<Image Width="32" HorizontalAlignment="Left" Margin="5" Source="ms-appx:///img/coffee.png" />
<TextBlock Text="caffee" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="40,0,26,5" ></TextBlock>
<TextBlock Text="$2" FontSize="18" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="5,5,30,5"></TextBlock>
<TextBlock Text="caffee" FontSize="18" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="5,5,90,5"></TextBlock>
</Grid>
</ListView>
you have to use
lv.Items.Add(e1);
I'm making a Windows Phone 8 App with C# and I'm trying to display the output of XML to a Pivot page with several listboxes, the only hurdle standing in my way is the alignment of the items in the ingredients box, they appear like this:
Table Salt
1
Pinch
When I actually want them to appear like this
Table Salt
1 Pinch
Basically each item appears on a separate line and through messing around with stack panels I can't seem to get anything to appear on the same line, this is the xaml code I'm using currently:
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Can anyone suggest a fix? Thanks in advance!
If it were me I would nest another stack panel in your Data Template
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
A StackPanel stacks contained items vertically. You could use one single TextBlock with two run elements:
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Foreground="White">
<Run Text="{Binding IngredientQuantity}" />
<Run Text="{Binding IngredientUnit}" />
</TextBlock>
</StackPanel>
May be like this
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="10,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Use StackPanel property Orientation="Horizontal"
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Do not display "host" and "port" fields. Please help find the error.
<!--ContentPanel – поместите здесь дополнительное содержимое-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,0">
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.ConnectionName, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="TitleServer" HorizontalAlignment="Left" Height="72" Margin="0,37,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
<TextBlock HorizontalAlignment="Left" Margin="11,109,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Host, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<StackPanel Margin="0,130,10,436" Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" x:Name="Host" TextWrapping="Wrap" Height="72" Width="345"/>
<TextBox HorizontalAlignment="Left" x:Name="Port" TextWrapping="Wrap" Height="72" Width="100" InputScope="Number"/>
</StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="11,210,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Login, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="Login" HorizontalAlignment="Left" Height="72" Margin="0,236,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
<TextBlock HorizontalAlignment="Left" Margin="11,314,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Password, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="Password" HorizontalAlignment="Left" Height="72" Margin="0,340,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
</Grid>
Try this
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,0">
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.ConnectionName, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="TitleServer" HorizontalAlignment="Left" Height="72" Margin="0,37,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
<TextBlock HorizontalAlignment="Left" Margin="11,109,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Host, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<StackPanel Margin="0,130,10,0" Orientation="Horizontal" VerticalAlignment="Top">
<TextBox HorizontalAlignment="Left" x:Name="Host" TextWrapping="Wrap" Height="72" Width="345"/>
<TextBox HorizontalAlignment="Left" x:Name="Port" TextWrapping="Wrap" Height="72" Width="100" InputScope="Number"/>
</StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="11,210,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Login, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="Login" HorizontalAlignment="Left" Height="72" Margin="0,236,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
<TextBlock HorizontalAlignment="Left" Margin="11,314,0,0" TextWrapping="Wrap" Text="{Binding LocalizedResources.Password, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Top"/>
<TextBox x:Name="Password" HorizontalAlignment="Left" Height="72" Margin="0,340,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="446"/>
</Grid>
The issue was with StackPanel's Margin Property. Please note that i added VerticalAlignment Property too.
Actually you simply need to use StackPanel as ContentPanel instead of
using Grid , so that you can place your controls one below one order
without giving any Margin.And that will be more easier
Set the visibility-property of the StackPanel to Collapsed or Hidden. Or, set this property on each of the TextBox controls separately if you prefer.
<StackPanel Visibility="Collpased" Margin="0,130,10,436" Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" x:Name="Host" TextWrapping="Wrap" Height="72" Width="345"/>
<TextBox HorizontalAlignment="Left" x:Name="Port" TextWrapping="Wrap" Height="72" Width="100" InputScope="Number"/>
</StackPanel>
More info on the property from MSDN:
Visible: Display the element.
Hidden: Do not display the element, but reserve space for the element in layout.
Collapsed: Do not display the element, and do not reserve space for it in layout.
this is the code that is driving me insane. It works great on windows 8(Snap View), but when I try to run the same XAML in my windows phone 7 app, it doesn't work.
WHAT HAPPENS
The app runs fine, but the problem is that the screen is blank. I have tried to add some background to the itemtemplate, and it does show up which means that maybe the databinding is working. But the content of the 5 textblock's doesn't show.
<ListBox x:Name="result_s" Margin="0,296,0,0" HorizontalAlignment="Center" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="8,8,48,8" Orientation="Horizontal" Height="80">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,0" Text="{Binding coeff}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="4,0,0,0" Text="{Binding x}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,16" Text="{Binding xPow}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="4,0,0,0" Text="{Binding y}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,16" Text="{Binding yPow}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here is the code behind
void func()
{
ObservableCollection<Equation> answer = new ObservableCollection<Equation>();
// SOME CODE GOES IN HERE, THE CODE POPULATES answer
result_s.ItemsSource = null;
result_s.ItemsSource = answer;
}
Please, can you see any reason this won't work.