I always got problems with elements positioning in windows phone. hope someone can help me:
I've a Listbox dinamically populatem from code behind:
<ListBox Name="list" Grid.Row="1" HorizontalAlignment="Center">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Style="{StaticResource list_service_item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
the style is defined in App.xaml:
<Style x:Key="list_service_item" TargetType="TextBlock">
<Setter Property="FontSize" Value="25"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="Peru" />
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0 0 0 5"/>
</Style>
and looks like is working correctly except for the alignment property.
if the listbox items have the same length all works well, but if one of them is longer all the others align themselves to the start of the longer item instead of remain centered:
how can i solve this?
You need to make the ItemContainer for each ListBoxItem stretch to the width of the ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
How about using the TextBlock.TextAlignment property?:
<Style x:Key="list_service_item" TargetType="TextBlock">
<Setter Property="FontSize" Value="25" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="Peru" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="TextBlock.TextAlignment" Value="Center" /><!--<<< Used here-->
<Setter Property="Margin" Value="0 0 0 5"/>
</Style>
Disclaimer: This works for WPF, but I can't guarantee that it works for Windows Phone 8
UPDATE >>>
Ok, after seeing your picture I would agree that it is not working as you expect. However, I think that It could be more of a case that the items are not placed correctly. You can try this:
<ListBox HorizontalContentAlignment="Center" ... />
If that does not work, you could try setting that property to Stretch so that the items fill the space and then that could give the TextBlocks the to centre themselves:
<ListBox HorizontalContentAlignment="Stretch" ... />
Related
I tried to make cell scrollable with a fixed maximum height, it doesn't really work and the content inside pretty much is not visible. Here's the code on the main page:
<DataGridTemplateColumn Header="Reported" Width="*" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Reported}" ScrollViewer.CanContentScroll="True"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
And here's the code from ResourceDictionary:
<Style TargetType="{x:Type DataGridCell}" x:Key="DefaultCell">
<Style.Setters>
<Setter Property="TextBlock.TextAlignment" Value="Center"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="TextBlock.TextTrimming" Value="WordEllipsis"/>
<Setter Property="MaxHeight" Value="40"/>
</Style.Setters>
</Style>
<Style TargetType="{x:Type DataGrid}" x:Name="Test" x:Key="DefaultGrid" BasedOn="{StaticResource BaseStyle}">
<Style.Setters>
<Setter Property="CanUserSortColumns" Value="True"/>
<Setter Property="ColumnHeaderHeight" Value="35"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="CanUserReorderColumns" Value="False"/>
<Setter Property="IsTextSearchEnabled" Value="True"/>
<Setter Property="CanUserAddRows" Value="False"/>
<Setter Property="CanUserDeleteRows" Value="False"/>
<Setter Property="SelectionUnit" Value="FullRow"/>
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DefaultHeader}"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="CellStyle" Value="{StaticResource DefaultCell}"/>
<Setter Property="CanUserResizeRows" Value="False"/>
</Style.Setters>
</Style>
As you can see I've tried adding this feature in every possible way and it didn't work. Everything else works fine.
The ItemsControl doesn't have scrolling capabilities. You need to add them yourself:
<DataGridTemplateColumn Header="Reported" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
CanContentScroll="True">
<ItemsControl ItemsSource="{Binding Reported}" />
</ScrollViewer>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Though you should be aware the ItemsControl is not optimized out of the box as it doesn't have virtualization by default like the ListBox and will lag if you try to display lots of items.
I have developed WPF code; I'm showing a figure like 0.77. But I want to show a figure like 0.7777.
I have two separate styles for both GridColumn and TextBox.
My code for gridcolumn is:
<Style TargetType="{x:Type dxg:GridColumn}" x:Key="dxGridColumnNumber" >
<Setter Property="ColumnHeaderContentStyle" Value="{DynamicResource dxHeaderContentControl}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" Mask="N2" MaskType="Numeric" HorizontalAlignment="Right" MaskUseAsDisplayFormat="True"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Also This is for textbox:
<Style TargetType="{x:Type dxe:TextEdit}" x:Key="dxTextEditTutarText" BasedOn="{StaticResource dxTextEditBaseText}">
<Setter Property="MaskUseAsDisplayFormat" Value="True" />
<Setter Property="MaskType" Value="Numeric" />
<Setter Property="Mask" Value="N2" />
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
Change the mask to "N4". In Your code, you set the mask to "N2" twice, which is unnecessary.
Just change
<Setter Property="Mask" Value="N2" />
to
<Setter Property="Mask" Value="N4" />
and remove Mask property in you TextExit (or the other way round)
For more options see https://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.100)
And the DevExpress documentation: https://documentation.devexpress.com/WindowsForms/1498/Controls-and-Libraries/Editors-and-Simple-Controls/Simple-Editors/Concepts/Masks/Mask-Type-Numeric
I am looking for a way to get one vertical Tab header and the other ones sould be rotated on the left Side, because they are created dynamically
When all the Tab headers are set onto the vertical positions it works very welll But If I want to change their oritentation it doesn't work anymore.
</Button>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
</DockPanel>
</DataTemplate>
<Style TargetType="TextBox">
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="AcceptsReturn" Value="True"></Setter>
<Setter Property="TextWrapping" Value="WrapWithOverflow"></Setter>
<Setter Property="MaxLines" Value="5000"></Setter>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"></Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"></Setter>
</Style>
</TabControl.Resources>
</TabControl>
I know their is the TabStrip property but how to manage it for my case?
I create an UWP App and define some styles like this:
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="Orange" />
<Setter Property="Margin" Value="12" />
<Setter Property="FontSize" Value="18" />
So, all my TextBlocks are orange and have a margin of 12px. All fine. But now I want to define a second style for Headlines, which should be inherit the base style and just override the extra defined properties, like this:
<Style x:Key="HeadlineStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="32" />
But if I do it this way, all other style definitions are gone (no margin, no coloring).
So how could I keep the base style?
In WPF I can use the x:Type attribute and just say
BasedOn="{StaticResource {x:Type Button}}"
But x:Type are not available in UWP (and what I found it is no longer supported)
This does exactly what you want:
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="medium">
<Setter Property="Foreground" Value="Orange"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="10"/>
</Style>
<Style TargetType="TextBlock" x:Key="bigger" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="30"/>
</Style>
</Grid.Resources>
<StackPanel>
<TextBlock Text="normal"/>
<TextBlock Text="medium" Style="{StaticResource medium}"/>
<TextBlock Text="bigger" Style="{StaticResource bigger}"/>
</StackPanel>
The first TextBlock is 10-px orange
The second TextBlock is 20-px orange
The third TextBlock is 30-px orange
I am populating my datagrid and did some styling on the DataGrid. I keep getting white space on the left side of the DataGrid. I've tried to set paddings and margins to 0 and still get the white space. I've attached a screenshot below. Please advice how to get rid of that white space.
XAML Code:
<Window.Resources>
<!-- DataGrid style -->
<Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}"/>
<Setter Property="CellStyle" Value="{DynamicResource CellStyle1}"/>
</Style>
<!-- DataGridColumnHeader style -->
<Style x:Key="ColumnHeaderStyle1" TargetType="DataGridColumnHeader">
<Setter Property="Height" Value="27"/>
<Setter Property="Background" Value="#191919"/>
<Setter Property="Foreground" Value="Cyan"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="3,2,2,2"/>
</Style>
<Style x:Key="CellStyle1" TargetType="DataGridCell">
<Setter Property="Height" Value="25"/>
<Setter Property="Background" Value="#333333"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="0.1"/>
</Style>
</Window.Resources>
<Grid>
<Canvas>
<DataGrid x:Name="dataGrid1" Canvas.Left="10" Canvas.Top="10" Height="auto" Width="auto" MaxHeight="400" AutoGenerateColumns="True" Style="{DynamicResource DataGridStyle1}"/>
</Canvas>
</Grid>
The stuff you can see are called row headers.
You can remove them by setting their width to 0.
Add this to the Datagrid style:
<Setter Property="RowHeaderWidth" Value="0" />