Change Border MinimumHeightRequest from StaticRecourse depending Light or Dark Theme - collectionview

In a CollectionView i use a Border with MinimumHeightRequest , trying to change the Height with StaticRecource depending on Dark or Light Theme.
Works with change the Stroke color or the Border but not the Height. Is this the wrong way or am i missing something.
In App.xaml the Style.
<Style x:Key="Nieuwslight" TargetType="Border">
<Setter Property="MinimumHeightRequest" Value="300" />
</Style>
<Style x:Key="NieuwsDark" TargetType="Border">
<Setter Property="MinimumHeightRequest" Value="220" />
</Style>
And the CollectionView with the Border
<CollectionView
x:Name="lstBal"
Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="{AppThemeBinding Light={StaticResource systemRed},
Dark={StaticResource Donkerrood}}"
ItemsSource="{Binding .}"
SelectionChanged="lstBal_SelectionChanged"
SelectionMode="Single">
<CollectionView.ItemsLayout>
<LinearItemsLayout ItemSpacing="20" Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Border x:Name="NieuwsBorder"
MinimumHeightRequest="{AppThemeBinding Light={StaticResource Nieuwslight},
Dark={StaticResource NieuwsDark}}"
Stroke="{AppThemeBinding Light={StaticResource LightBorderColor},
Dark={StaticResource Maroon}}"
StrokeShape=" RoundRectangle 10"
StrokeThickness="2">
<Grid Padding="15,0,0,0" ColumnDefinitions="*,2*">
<Frame
BackgroundColor="Transparent"
BorderColor="Transparent"
CornerRadius="15"
HeightRequest="150">
<Image
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="120">
<Image.Source>
<UriImageSource
CacheValidity="5"
CachingEnabled="True"
Uri="{Binding Foto}" />
</Image.Source>
</Image>
</Frame>
<Label
Grid.Column="1"
Padding="25,5,5,0"
FontSize="22"
Text="{Binding Fototekst}"
TextColor="{AppThemeBinding Light={StaticResource DarkColor},
Dark={StaticResource LightTextColor}}" />
<Grid>
<Grid RowDefinitions="Auto,*,Auto" />
</Grid>
</Grid>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Solved it .
In App.xaml set the Height for Minimum or Large.
<x:Double x:Key="defaultMinimumHeightRequest">220</x:Double>
<x:Double x:Key="largeMinimumHeightRequest">300</x:Double>
And in MainPage.xaml for the Border
<Border x:Name="NieuwsBorder"
MinimumHeightRequest="{AppThemeBinding Light={StaticResource defaultMinimumHeightRequest},
Dark={StaticResource largeMinimumHeightRequest}}"/>

Related

Style for a CustomControl is not applied in Generic file

I have a custom control, in that custom control I have loaded the TextBox, and I have customized the style for TextBox in Generic.XAML file but the style is not applied, Please refer the below code
CustomControl.cs
class CustomControl1 : Control
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
}
Generic.XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl">
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.XAML
<Page
x:Class="CustomControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<local:CustomControl1 VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200"/>
</Grid>
I have set the foreground color for TextBox in Generic.XAML file but that is not set to the TextBox. Please refer the below image,
If I customized the style for a TextBox in Page.Resources in MainWindow.XAML its works fine. But I need to customized in Generic.XAML itself.
Any suggestion on this?
There are multiple solutions:
Just set the Foreground property on the TextBox.
Since you ask this question, I suppose you'll have multiple TextBoxes and don't want to repeat setting the property. If the color has to change some day, you'll have a lot of work.
Give your TextBox style a key and apply that style.
Easy fix, but not perfect if have multiple types of controls with Foreground property.
<Style x:Key="RedStyle" TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Style="{StaticResource RedStyle}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Define the Foreground property on your template and use TemplateBinding
This is my favorite fix.
<Style TargetType="local:CustomControl1" >
<Setter Property="Foreground" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Align radio button to right side of popup

I have a popup for select colors.
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
I want the radio button to show on the right side. But It looks as in the image.
How can I move the radio button to the right side?
I got the answer from here.
By Adding the following xaml I got the desired output.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This works for me. I have updated my xaml as follows
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
Since the grid only contains 2 columns and the 2nd column only contains the radio button I would set the column definition to a fixed with for the 2nd one instead of auto. see if that works.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>

stretch TextBlocks inside a Grid in a universal App

I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

Change background color of checked combobox in datagridview on button click using MVVM

Hi I am new in WPF I want change background color of selected row. please help me in this
Itemsource for datagrid id Data property which is INotify Used to crate combobox (This Work Fine)
IsChecked is Property for Checkbox
please note that combobox and check box are dynamically created
<DataGrid Name="lbUsers" ItemsSource="{Binding Data}" CanUserAddRows="False" Grid.Column="1" Grid.Row="1" SelectedIndex="{Binding SelectionIndexChange, Mode=TwoWay}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Rule Type" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DataContext.RuleType}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=DataContext.RuleType, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="45" Height="20" IsChecked="{Binding ElementName=lbUsers,Path=DataContext.IsChecked}" ></CheckBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns
<DataGrid ItemsSource="{Binding Data}" CanUserAddRows="False" Grid.Column="1" Grid.Row="1" SelectedIndex="{Binding SelectionIndexChange, Mode=TwoWay}" AutoGenerateColumns="False">
<DataGrid.ItemContainerStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked}" Value="True">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.ItemContainerStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Rule Type" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding RuleType}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=DataContext.RuleType, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="45" Height="20" IsChecked="{Binding IsChecked}"></CheckBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

JavaFX 2.0 render controls inside control

I work with .net WPF. Using this library allow me to completely redesign every control. F.e. - I've button, inside button I can render table (grid) with rows and columns. Then on specific cordination in table (grid) I can render image, label or something else.
here is the example for redesign ListBoxItem
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid x:Name="ShortCutGrid"
Height="96"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="96"
Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="96"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Grid.Column="1" Name="Image1" Width="48" Height="48" Source="{Binding Path=ImageName}"/>
</Grid>
<StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label>
<TextBox Background="Transparent"
x:Name="TextBox1"
Text="{Binding Path=Text}"
Foreground="Black"
TextWrapping="WrapWithOverflow"
TextAlignment="Center"
BorderThickness="0"
IsReadOnly="True"
Focusable="False"
Cursor="Arrow">
</TextBox>
</Label>
</StackPanel>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="TextBox1" Property="Background" Value="Navy"/>
<Setter TargetName="TextBox1" Property="Foreground" Value="White"/>
<Setter TargetName="Image1" Property="OpacityMask" Value="{StaticResource ShortcutSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<EventSetter Event="MouseDoubleClick" Handler="listBoxItem_DoubleClick" />
</Style>
My question is : Is possible in JavaFX 2.0 to render controls inside another control
in fxml?
With the basic controls, it isnt. But you can compose your own controls which can contain contains any node.

Resources