I'm moving project from WPF .net 6 to Avalonia and i'm struggling with styling datagridtextcolumn. In pure WPF My code is:
<DataGridTextColumn Binding="{Binding Name}" Header="Имя" >
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Label >
<Label.Content >
<MultiBinding Converter="{StaticResource TextBoxMiscConverter}">
<Binding Path="Name" />
<Binding Path="IsChecked" ElementName="ShowEnglishCbx" />
<Binding Path="IsChecked" ElementName="ShowRussianCbx" />
</MultiBinding>
</Label.Content>
</Label>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
And in pure WPF it works perfectly, but i can't find proper solution for Avalonia
I'm reading avalonia documentation and i can't find proper solution.
Found a solution for my case:
<DataGridTextColumn Header="Имя" Binding="{Binding Name}" >
<DataGridTextColumn.Binding>
<MultiBinding Converter="{StaticResource TextBoxMiscConverter}">
<Binding Path="Name" />
<Binding Path="IsChecked" ElementName="EnglishTextChk" />
<Binding Path="IsChecked" ElementName="CyrTextChk" />
</MultiBinding>
</DataGridTextColumn.Binding>
</DataGridTextColumn>
Related
I have a custom template for a flyout, and it works fine on about half of our systems, but it completely breaks on the other half.
Here's what the menu looks like when it works:
And here's what it looks like when it doesn't work... the semi-transparency is completely black, and the contents of the menu itself are completely off the screen:
You can ignore how the second screenshot is wider and how the stuff behind the menu looks different. That's just a different resolution and a different set-up, but this issue happens even when they're the same.
As noted in the picture, when the MenuFlyout appears (when I open the menu via clicking the AppBarButton), I need a semi-transparent area to appear in front of the rest of the page. This is accomplished by putting a big rectangle in the flyout's template, causing the shadow behind the flyout to be extended out over the rest of the page.
Here's the code of the button that triggers the flyout to show:
<AppBarButton
x:Name="MenuBtn"
Height="72"
Label="{StaticResource Menu}"
AllowFocusWhenDisabled="False"
Click="MenuBtn_Click"
CornerRadius="0"
Style="{StaticResource AppBarIconButtonStyle}"
TabIndex="9"
Width="72"
Margin="0,0,16,8"
Loaded="MenuBtn_Loaded"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="False">
<AppBarButton.Flyout>
<MenuFlyout x:Name="HbgMenuFlyout" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}" Opening="MenuFlyout_Opening" Closing="HbgMenuFlyout_Closing" Closed="MenuFlyout_Closed">
<MenuFlyoutItem x:Name="SelectRoomBtn" x:Uid="HbgMenu_Select_Room" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SelectRoomBtn_Click" /> <!-- mobile only -->
<MenuFlyoutItem x:Name="PhysicianProfileBtn" x:Uid="HbgMenu_Physician_Preferences" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="Physician_Preferences_Click" />
<MenuFlyoutItem x:Name="SystemSettingsBtn" x:Uid="HbgMenu_Settings" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SystemSettingsBtn_Click" />
<MenuFlyoutItem x:Name="HomeBtn" x:Uid="HbgMenu_Home" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="HomeBtn_Click" />
<MenuFlyoutItem x:Name="LogoutBtn" x:Uid="HbgMenu_Logout" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="LogoutBtn_Click" />
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
Here's the code for the style attached to the MenuFlyout:
<Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Dark"/>
<Setter Property="Background" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,0" />
<Setter Property="Padding" Value="0" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="2000" />
<Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<controls:FlyoutGridControl />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here's the code for that control:FlyoutGridControl:
<UserControl
x:Class="CardiologyApp.Controls.FlyoutGridControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CardiologyApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" >
<RelativePanel x:Name="RootGrid" HorizontalAlignment="Stretch">
<Rectangle x:Name="Shield" Width="2000" RelativePanel.AlignRightWith="MenuFlyoutPresenterScrollViewer" PointerPressed="Rectangle_PointerPressed" />
<ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
Width="516"
RelativePanel.AlignRightWithPanel="True"
HorizontalAlignment="Right"
Background="Gray"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter />
</ScrollViewer>
<Border x:Name="MenuFlyoutPresenterBorder"
VerticalAlignment="Stretch"
RelativePanel.Below="MenuFlyoutPresenterScrollViewer"
RelativePanel.AlignRightWithPanel="True"
Height="1000"
Background="Gray"
Width="516"
/>
</RelativePanel>
The workaround for the developers is to comment out the in the control:FlyoutGridControl.
Any suggestions on how to make the behavior consistent across systems? We're all on Windows 10 Enterprise.
MenuFlyout is not suitable for pop-up layer fixed on the right sidebar. In higher system versions, MenuFlyout is not limited by the size of the application window, which will invalidate your layout.
According to your actual display picture, SplitView should be a control that better meets your needs.
This is a simplified layout structure:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<CommandBar VerticalAlignment="Top" HorizontalAlignment="Stretch">
<AppBarButton/>
</CommandBar>
<SplitView DisplayMode="CompactOverlay" OpenPaneLength="516"
PanePlacement="Right" x:Name="AppSplitView" Grid.Row="1">
<SplitView.Pane>
<Grid>
<!--Used to display list items-->
<ListView/>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<!--Main content display area-->
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
If you want to apply the above code, you need to use ListViewItem in ListView to replace your MenuItem.
If you need to show your options, just set:
AppSplitView.IsPaneOpen = True;
For more information about SplitView and its display effect, you can check this document:
Split view
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 use a DataTemplate to change the Header of some TabItems.
So far I have this Code, which works fine:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" x:Class="SFgame.MainWindow"
Title="SoccerFusion" Height="600" Width="1000" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Grid>
<TabControl TabStripPlacement="Bottom">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<DataTemplate x:Key="mmHeaderTemplate">
<Image Name="mmItem1" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="mmItem1" Property="Source" Value="data\Images\Menu\ActiveItem.png" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter TargetName="mmItem1" Property="Source" Value="data\Images\Menu\InactiveItem.png" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" IsSelected="True">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Window>
The only problem is, that now all TabItem-Headers have the same Picture. All TabItems should have different pairs of Pictures fpr active and inactive.
So I guess I would pass the path of the picture as parameter, but I just can't figure out how that works.
The only thing I can find is: "Can't pass Parameters".
If that really doesn't work. Is there an alternative? For example give the TabItem a Name like "TabItem1" and usw the Path "data\Images\Menu\Tabitem1_active.png" and "data\Images\Menu\Tabitem1_inactive.png" as Source? Can I insert the Name of the Binding-Source into a string?
Edit:
I'm a little closer to a solution
<Setter TargetName="mmItem1" Property="Source">
<Setter.Value>
<MultiBinding StringFormat="{}{0}{1}{2}">
<Binding Mode="OneTime" Source="data\Images\Menu\" />
<Binding Mode="OneTime" Source="??????" />
<Binding Mode="OneTime" Source="inactive.png" />
</MultiBinding>
</Setter.Value>
</Setter>
with this code instead of the one on the upper, i can concat three strings. the only thing i need now, is the name of the sourcecontrol/bindingsource
Next Edit:
I'm a little closer i think. I succeeded in getting a string from my tabitem to the Template, by using the Header of the TabItem.
Code looks like this now:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SoccerFusion" Height="400" Width="400">
<Grid>
<TabControl TabStripPlacement="Bottom">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<DataTemplate x:Key="mmHeaderTemplate">
<Grid>
<Image Name="mmImg" />
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}'}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
????? HERE COMES THE PROBLEM ??????
<Setter TargetName="mmImg" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}active.png'}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="False">
????? HERE COMES THE PROBLEM ??????
<Setter TargetName="mmImg" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}inactive.png'}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" IsSelected="True" Header="mmItem1">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem2" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem3" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem4" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Page>
The Problem is:
I generate a String and give it to the Image as a Source. Which works fine.
But the Source needs an URI and can't do anything with the String
Any Ideas?
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}" />
The following shows me 3x "MultiTest.Model.Customers" in the ListBox (one for each record it should display).
What do I need to change in order for it to output the contents of the fields instead?
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ContentTemplate" >
<Setter.Value>
<MultiBinding StringFormat="{}{1}, {0} ">
<Binding Path="FirstName" />
<Binding Path="LastName"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="theCustomers"/>
</Grid>
binding in code-behind with ADO.NET Entity Framework:
MainEntities db = new MainEntities();
var customers = from c in db.CustomersSet
select c;
theCustomers.ItemsSource = customers;
ANSWER:
Thanks, Steve, here is your answer in my Window.Resources format:
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock>
<TextBlock.Text>
<MultiBinding StringFormat="{}{1}, {0} ({2})">
<Binding Path="FirstName"/>
<Binding Path="LastName"/>
<Binding Path="ID"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="theCustomers"/>
</Grid>
If you particularly want to use MultiBinding you should be able to use a DataTemplate with StringFormat.. something like:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock>
<TextBlock.Text>
<MultiBinding StringFormat="{}{1}, {0}">
<Binding Path="FirstName"/>
<Binding Path="LastName"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Or for something more complicated you could use a ValueConverter (or the multiple binding variant).
I've never used MultiBinding before. I have used, however, DataTemplates:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"></TextBlock>
<TextBlock Text=" - "/>
<TextBlock Text="{Binding Email}" Margin="5,0"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Hope this helps!