The new Windows 8 metro API still defineds class DataTemplateKey.
However, I can figure out how to use it.
Do you have an example in XAML that shows how it can be used?
Here's an example on how to use DataTemplateKey. Just a note and a reminder : The x:Key attribute will take precedence over the automatic DataTemplateKey that is generated based on the DataType
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<TextBlock Text="{Binding}" Foreground="Red" />
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<TextBlock Text="{Binding}" Foreground="White" />
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListBox x:Name="lstItems" ItemContainerStyle="{StaticResource ContainerStyle}" />
Related
I'm currently facing a problem in one of my Xaml Files. I created a combox with 2 fixed combobox Items. I also created a textblock. Here is the xaml code :
<StackPanel>
<TextBlock Grid.Column="0" x:Name="UserSettingsConnectorGroupBoxProductTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Strings.UserSettingsConnectorGroupBoxProductText, Source={StaticResource StringLocalizer}}" VerticalAlignment="Center" Margin="10,0,0,0" />
<ComboBox Grid.Column="1" x:Name="UserSettingsConnectorGroupBoxProductComboBox" VerticalAlignment="Center" Width="300" HorizontalAlignment="Left" Margin="10,5,0,0" SelectionChanged="UserSettingsConnectorGroupBoxProductComboBox_SelectionChanged" >
<ComboBoxItem Content="Microsoft Deployment Toolkit" />
<ComboBoxItem Content="Microsoft System Center Configuration Manager" />
</ComboBox>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="10,0,0,0">
<TextBlock Name="ConnectorTextBlock" Text="toto" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBox Name="ConnectorTextBox" Margin="0,5" Width="300">
</TextBox>
<Button Content="Test" Margin="5" Width="100" HorizontalAlignment="Right"/>
</StackPanel>
<Button Content="Save" Width="100" HorizontalAlignment="Left" Margin="0,5" IsEnabled="False"/>
</StackPanel>
And a preview :
enter image description here
I would like the text of textBlock named "ConnectorTextBox" changes when the combobox Selected Item Changes. In order to do this, i created 2 datatriggers in TextBlock bound to "Text" Property of Combobox Control. Depending on the value of Text property, the Text value of textblock changes.
But it does not function. Only default value "Toto" is diplayed, even if i change my combobox Selection.
Any help would be greatly appreciated :) :)
Regis
Avoid setting Text property of TextBlock. Try this
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
If you want to set a default value, do it as below
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="Toto" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Hope this helps!!
I want to create a grid of images without any margin between them. I tried to achieve this through a GridView. If there is an easier way, please let me know.
I found this answers on StackOverflow:
https://stackoverflow.com/a/10492464
https://stackoverflow.com/a/23817931/5739170
And ended up with this code:
<Page.Resources>
<Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Field">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock x:Name="text">Hallo!</TextBlock>
</StackPanel>
</Grid>
But there is still a margin left:
Screenshot
I have also tried to use negative margins but when I use them clicks aren't recognized correctly anymore.
How can I remove the margins?
Seems like the GridViewItem has a default MinWidth of 44px.
You can set it to 0 via your GridViewItemStyle:
<Setter Property="MinWidth" Value="0" />
EDIT: it also has a default MinHeight, you might want to set that to 0 as well.
The code below should work:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0"/>
</Style>
</GridView.ItemContainerStyle>
Your code is good. If you add a Grid in the DataTemplate (with a Background), you will see there is no margin between grids :
<DataTemplate x:DataType="data:Field">
<Grid Background="Red">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</Grid>
</DataTemplate>
Your problem is the following : you set a fixed size for Image control wich all of them is in a container, but the container doesn't have a fixed, so images are centered in the container.
I see two solutions. First is to remove the fixed size for Image control and use Strecth property to fill correctly :
<DataTemplate x:DataType="data:Field">
<Image VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Margin="0"
Source="{x:Bind ImagePath}"/>
</DataTemplate>
For the first solution, you must be sure of the filling behavior of the container. You can do something like :
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" />
The second solution is to set a fixed size on the container directly :
<Style x:Key="MyGridViewItemStyle"
TargetType="GridViewItem">
<Setter Property="Padding"
Value="0" />
<Setter Property="Margin"
Value="0" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'd like to have several TextBlocks generally looking the same, but each needs to react on another trigger and in another way. I've tried to use a common style (MyTextBlockStyle) and add triggers later. But I get allways error meesages like "the property 'style' has been declared twice" or simillar.
To explain what I mean, I've made an example with 3 TextBlocks. 2 of them are bound to each a different CheckBox, and each triggering a different property (displayed text vs. foreground color). A third TextBlock shall change its background color depending of the content of a TextbBox. How can I achieve something like this?
<UserControl.Resources>
<Style x:Key="MyTextBlockStyle" TargetType="TextBlock">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="5"/>
</Style>
</UserControl.Resources>
<Grid >
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Foreground="White" Margin="5" />
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Foreground="White" Margin="5" />
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..." Tooltip="Change Background of TextBlock 3"/>
<TextBlock Style="{StaticResource MyTextBlockStyle}" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Something different">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox02, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Anything else">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="Yellow" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TextBox03, Path=Text}" Value="">
<Setter Property="Background" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Grid >
Please try this code.It works.I guess as you wish
<Window.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox01,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb1"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Orange"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox02,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb2"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Pink"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=TextBox03,Path=Text}" Value=""/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb3"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Green"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Margin="5"/>
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Margin="5"/>
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..."/>
<TextBlock Tag="tb1"/>
<TextBlock Tag="tb2" Text="Something different"/>
<TextBlock Tag="tb3" x:Name="tb3" Text="Anything else"/>
</StackPanel>
</Grid >
You are looking for the BasedOn Property. It gets me all the time.
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="MyTextBlockStyle">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
I am trying to add a hyperlink to a xaml rectangle and it's not working. I tried adding hyperlink with a button and it works. How can I add hyperlink to a group of rectangle for the code below.
How to give Hyperlink for below Code
<Rectangle Fill="Red" HorizontalAlignment="Left" Height="38" Margin="1038,74,0,0" Stroke="Black" VerticalAlignment="Top" Width="426"/>
<TextBlock HorizontalAlignment="Left" Margin="1173,82,0,0" TextWrapping="Wrap" Text="Pending Sites " VerticalAlignment="Top" Height="24" Width="142" Foreground="#FFF7F6F1" FontSize="20" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-0.098"/>
</TextBlock.RenderTransform>
</TextBlock>
Code I tried with Button which is working fine
<Button Content="Click to go to desc page" Click="Button_Click_1" Margin="62,376,0,357"/>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(dPlanner2x.MyPageDetails));
}
Rather than trying to turn a Rectangle into a click-able object, you are much better off if you apply a Style to a Button.
An example of a Style to change the look of a Button is given below:
<Style x:Key="btnCommand" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="rct"
TextBlock.Foreground="White"
Background="DarkGray"
BorderBrush="DarkGray"
BorderThickness="1"
Cursor="Hand"
UseLayoutRounding="True"
SnapsToDevicePixels="True"
Margin="10"
Height="24"
MinWidth="75">
<ContentPresenter TextBlock.FontStyle="Segoe UI Semibold"
TextBlock.FontSize="14"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="LightGray" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="DarkGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="White" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Obviously, you will want something that looks completely different, but the Style template above can be easily modified to fit your needs.
I Have a ItemTemplate in which is a simple button bound on a command, which can be executable or not depending on some property.
I'd like the color of this button's background to change if the command isn't executable.
I tried several methods, but I can't find anyway to do this purely in XAML (I'm doing this in a study context, and code behind isn't allowed).
Here's my code for the button :
<Button x:Name="Dispo" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="30" Height="30"
Grid.Column="2" Grid.Row="0"
Command="{Binding AddEmpruntCommandModel.Command}"
CommandParameter="{Binding ElementName='flowCars', Path='SelectedItem'}"
vm:CreateCommandBinding.Command="{Binding AddEmpruntCommandModel}" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Button.Background" Value="Green"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Button.Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can specify your own template like that:
<Button Content="OK" Command="{Binding SomeCommand}">
<Button.Style>
<Style>
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>