I've got this code:
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}" Grid.Row="0" Grid.Column="0" >
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
As you can see I've got a header template with a DataTemplate inside the GroupBox. The strange thing is the Label outside the GroupBox displays the value of TeamHome correctly however inside the StackPanel in the DataTemplate nothing is displayed and the binding is the same, why? Mystery of the life.
You need to bind your GroupBox to a datasource, then it will be available to the template.
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}"
Grid.Row="0"
Grid.Column="0"
DataContext="{Binding MatchController}">
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32"
Width="32"
Source="{Binding Match.TeamHomeShield}" />
<Label Content="{Binding Match.TeamHome}" />
<TextBlock Margin="8,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource MaterialDesignSubheadingTextBlock}"
Text="{Binding Match.TeamHome}" />
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=DataContext.MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
If the DataContext of your code is set on the Window element, use this code. Otherwise, just change to the type of the nearest element that has this DataContext.
Related
I'm using materialDesign open source UI library to develop, for I want to use data template to display, the code is as follows, but the display style of the interface is not correct, the display logic is also not correct
<materialDesign:Card>
<TabControl VerticalContentAlignment="Top" materialDesign:ColorZoneAssist.Mode="PrimaryMid"
ItemsSource="{Binding IndexMenus}" Style="{StaticResource MaterialDesignNavigationRailTabControl}">
<b:Interaction.Triggers>
<b:EventTrigger EventName="SelectionChanged">
<b:InvokeCommandAction Command="{Binding NavigateCommand}"
CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TabControl}}" />
</b:EventTrigger>
</b:Interaction.Triggers>
<TabControl.ContentTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</materialDesign:Card>
This is what it looks like now
If the data template is not used, he will show this
You should be using ItemTemplate instead of ContentTemplate
<TabControl.ItemTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ItemTemplate>
I want to design a Control Similar to this, where to the left corner would be Some Text and right corner will have Checkbox mark.
I tried doing something like this.
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" >
<CheckBox IsChecked="{Binding IsChecked}">
<StackPanel Orientation="Horizontal">
<Image VerticalAlignment="Center" Source="{Binding Img}">
</Image>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</StackPanel>
</CheckBox>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But the output isn't what I want.
you can put Image, text and checkbox in a single Grid and stick text and checkbox to corners:
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" >
<Grid>
<Image VerticalAlignment="Center" Source="{Binding Img}"/>
<TextBlock Text="{Binding Name}"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5"/>
<CheckBox IsChecked="{Binding IsChecked}"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have this expander control with WrapPanel in it:
<Expander Background="Black">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Source="../Images/Button/customiseButton_Transparent.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Customize" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
</Expander>
I need a to display a white separator between the two stack panels.
I have tried adding the <Seperator/> tag, but it does not work
A Separator is nothing more than a Border element really so this should work just fine:
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<Border Width="2" Background="Red" />
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
Just change the Width and Background properties of the Border according to your requirements.
The actual Separator element always has a Height of 1 on Windows 10 unless you modify its ControlTemplate.
Use this Tag:
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
I have this xaml code on one of the windows in my app:
<phone:PanoramaItem x:Name="panoramaItemSend" Header="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" >
<StackPanel Margin="12,0,0,0">
<TextBlock Text="{Binding LocalizedResources.recipientEmail, Source={StaticResource LocalizedStrings}}" />
<TextBox InputScope="EmailUserName" Text="{Binding SendModel.Email, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="100" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256" Height="105" TextWrapping="Wrap">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.amount, Source={StaticResource LocalizedStrings}}" />
<TextBox x:Name="txtSendAmount" InputScope="Number" Text="{Binding SendModel.Amount, Mode=TwoWay}" Margin="-12,0,0,0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" TabIndex="101" MaxLength="20" TextChanged="TextBox_TextChanged" >
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding SendModel.AmountFiatStr}" Margin="0,-15,0,5" Foreground="Gainsboro"/>
<TextBlock Text="{Binding LocalizedResources.label, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Label, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="102" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.message, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Message, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="103" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<Button x:Name="btnSend" Content="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" Style="{StaticResource OrangeButton}" Tap="btnSend_Tap" TabIndex="104"/>
</StackPanel>
I want to create a popup when I trigger btnSend's Tap handler - btnSendTap
My popup should have this grid full of accounts that I already know how to add programatically:
<Grid Margin="15,0,0,21">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo" Grid.Row="0">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
Have a look at the PopUp control.
Hope that is what you are looking for. :)
I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data
Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)