I use fonts instead of Icons in my UI, suppose that I design a check mark in a font creator application, export ttf, embed the font in my project as a resource and then use it like this:
<Button>
<Button.Content>
<WrapPanel>
<TextBlock Text="C" Margin="0,0,10,0" FontFamily="./#MyFont"/>
<TextBlock Text="OK" FontFamily="verdana"/>
</WrapPanel>
</Button.Content>
</Button>
The problem is when I use my font in various sizes, the quality of characters is very bad.
I tryed UseLayoutRounding, RenderOptions, TextOptions, SnapsToDevicePixels and yet not a satisfactory result.
To show you how the poor quality is, I used an LCD font called Famirids and take snapshots of some various sizes. Look at the code and the snappshots:
<DockPanel Margin="10">
<Slider x:Name="slider1" Minimum="1" Maximum="50" Value="17" DockPanel.Dock="Top"/>
<UniformGrid Columns="1">
<Label Content="Why this is like this?" FontFamily="./#Famirids" FontSize="{Binding ElementName=slider1, Path=Value}" VerticalAlignment="Center"/>
<Viewbox Height="{Binding ElementName=slider1, Path=Value}" HorizontalAlignment="Left">
<Label Content="Why this is like this?" FontFamily="./#Famirids" FontSize="100" VerticalAlignment="Center"/>
</Viewbox>
</UniformGrid>
</DockPanel>
<<< This is the snapshots >>>
As you can see, even the Viewbox does not solve the problem. So please help me what to do?
Related
What is a good way to get rid of repeating XAML in different files. Example :
<StackPanel Grid.Row="8" Grid.Column="2" Style="{StaticResource ViewContentStyle}" Visibility="{Binding Type, Converter={StaticResource TypeToVisibility}}">
<ctl:NewLabel LabelContent="{x:Static common:LocalResources.UNameLabel}" LabelStyle="{DynamicResource ContentLabelStyle}"
ImageStyle="{DynamicResource ViewContentControlStyle}">
<ctl:ETextBox x:Name="UserName" HorizontalAlignment="Left" Style="{StaticResource {x:Type TextBox}}"
LostFocus="Textbox_OnLostFocus"
Text="{Binding Path=UserName, UpdateSourceTrigger=PropertyChanged, NotifyOnValidationError=True, ValidatesOnDataErrors=True}">
</ctl:ETextBox>
</ctl:NewLabel>
</StackPanel>
<StackPanel Grid.Row="9" Grid.Column="2" Style="{StaticResource ViewContentStyle}" Visibility="{Binding SelectedAuthenticationType, Converter={StaticResource AuthToVisibility}}">
<StackPanel Orientation="Horizontal" KeyboardNavigation.TabNavigation="None">
<Label Style="{DynamicResource ContentLabelStyle}" Content="{x:Static common:LocalResources.UPasswordLabel}"/>
<AdornerDecorator>
<PwdBox x:Name="Password"
HorizontalAlignment="Left"
LostFocus="Textbox_OnLostFocus" PasswordChar="*"
</PwdBox>
</AdornerDecorator>
</StackPanel>
I have 3 files where almost the same code is reused. I think there is a way to get rid of this by using a common custom control. However, I dont see much examples as to how it can be done. Any leads would be great.
Add a new UserControl to your project and move the common XAML to this one.
You could then create an instance of this UserControl (replace "UserControl1" with the actual name of your UserControl) in any other view:
<!--insert the shared markup here: -->
<local:UserControl1 />
Hi I'm struggling with rotation in XAML. I found a solution that LayoutTransform should solve this issue, but on Windows Universal Plattform this option isn't available!
This is my Code:
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Center">
<Rectangle Fill="Red" Height="100" Width="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
Text="long long long long long long long long text"
RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="Green" Height="100" Width="100" />
</StackPanel>
But as you can see there are an huge margin between the colored boxes and the textblock as you can see here:
So my first guess was to add an Width="30" property to the textblock, but this isn't working as you can see here (not only the offset is the problem, but the cropping is the problem):
Any suggestions?
Try the LayoutTransform control of the WinRTXamlToolkit. Following links should help.
Github Source link and Demo link
I am developing an application where i want to browse images like native WindowsPhone form.
I have used Pivot control. Everything works, but there is one unwanted thing. The image does not fill all display area. There is a gap on the top of page. I have set margin and padding everywhere where it is possible. And the result is still the same. :(
Here is my XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid
x:Name="LayoutRoot"
Background="Transparent"
Margin="0">
<toolkit:PerformanceProgressBar
VerticalAlignment="Top"
HorizontalAlignment="Left"
IsIndeterminate="{Binding IsBusy}"
Visibility="{Binding IsBusy, Converter={StaticResource BoolToVisibilityConverter}}"
/>
<controls:Pivot
x:Name="PhotoPivot"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
IsHitTestVisible="True"
ItemsSource="{Binding Photos}"
Margin="0"
Padding="0"
>
<controls:Pivot.HeaderTemplate>
<DataTemplate/>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate >
<controls:PivotItem
x:Name="PhotoPivotItem"
Margin="0"
>
<Image
x:Name="PhotoPicture"
Source="{Binding}"
Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0"
/>
</controls:PivotItem>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
Are you talking about the system tray?
To remove the system tray use the following code:
shell:SystemTray.IsVisible="False"
Update:
I'm not real sure why that extra space is there.
I created a simplified version of your example and the only thing I could think of is to use negative margins. There is probably a better solution that I am just overlooking, but for now you can just use the following:
<controls:PivotItem x:Name="PhotoPivotItem" Margin="0,-10,0,0">
Although, from your posted image, it looks as if you have a bigger gap than I did, so you might need to decrease the margin.
I am using a textblock to display the product description under the product's image. The text must be fixed 100px wide but the height can grow up to 30px tall. If the text still can't fit, it must display ellipsis. Here is my xaml:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" .../>
<Canvas/>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="{Binding Path=ProductDescription}"
HorizontalAlignment="Center" VerticalAlignment="Top" TextAlignment="Center">
</StackPanel>
The description can have multiple lines. For eg, "Wireless Mouse\nQuantity:20". It looks ok on XP but on Windows 7 only the first line shows up and there's no ellipsis. Can anyone spot the problem in my xaml?
There are several errors in your example: should , ".../>" isn't valid XAML and your TextBlock doesn't have a closing tag.
The follow XAML worked fine on for me on Windows 7:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" />
</Canvas>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="I use canvas here to reserve some space for animation (grow/shrink)"
HorizontalAlignment="Center"
VerticalAlignment="Top"
TextAlignment="Center" />
</StackPanel>
Depending on the font size MaxHeight of 30 is almost just one line of text, so the textblock can't grow in height. Change it or remove it completely.
The goal:
I'm trying to achieve something like this in WPF:
(source: wordpress.org)
An initial solution:
At the moment, I'm trying to use an ItemsControl with an ItemTemplate composed of an Expander.
I want a consistent look for the Header portion of the Expander, but I want the Content portion of the Expander to be completely flexible. So, it's basically a set of "portlets" stacked vertically, where each portlet has a consistent title bar but different content.
The code so far:
This is what I have at the moment:
<ItemsControl
Grid.Row="2"
Grid.Column="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal">
<TextBlock
FontSize="14"
FontWeight="Bold"
Text="Title_Of_Expander_Goes_Here" />
<TextBlock
Margin="10,0,0,0"
FontWeight="Bold"
FontSize="18"
Text="*" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.Template>
<ControlTemplate
TargetType="Expander">
<Border
BorderThickness="1">
<ContentPresenter />
</Border>
</ControlTemplate>
</Expander.Template>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<StackPanel>
<TextBlock
FontSize="14"
FontWeight="Bold"
Text="Users:" />
<wt:DataGrid
Margin="0,1,0,0"
AutoGenerateColumns="False"
CanUserAddRows="True"
CanUserDeleteRows="True"
ItemsSource="{Binding Source={StaticResource Main_SystemUsers}, XPath=//Users/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Header="User Name"
Binding="{Binding XPath=#UserName}" />
<wt:DataGridComboBoxColumn
Header="Role"
ItemsSource="{Binding Source={StaticResource Main_UserRoles}, XPath=//Roles/*}"
SelectedValueBinding="{Binding XPath=#Role}" />
</wt:DataGrid.Columns>
</wt:DataGrid>
<StackPanel
Margin="0,10,0,0"
Orientation="Horizontal">
<Button
Content="Add New User..." />
<Button
Margin="10,0,0,0"
Content="Delete User..." />
</StackPanel>
</StackPanel>
</ItemsControl.Items>
</ItemsControl>
Discussion:
The only thing that shows up when I run this is the DataGrid of users and the buttons ("Add New User" and "Delete User") below it. There is no Expander or title bar. Also, even if I did see one, I'm not sure how to set up a Binding for the title that appears on the title bar. I know how to do bindings if I use ItemsSource, but I wanted to set my items declaratively.
The question:
How should I go about this? I'm looking for either a fix for what I have now or a clean-sheet solution.
Edit:
What I ended up doing was replacing the ItemsControl with a StackPanel and just writing a style for my expanders. This proved to be much simpler, and there really was no benefit to the ItemsControl since I needed to declare custom content for each item anyway. The one issue remaining was how to achieve a custom title for each expander. That's where #Thomas Levesque's suggestion to use TemplateBinding came in. All I had to do was replace Text="Title_Of_Expander_Goes_Here" in my header's template (see code above) with Text="{TemplateBinding Content}".
You're not seeing the Expander because you redefined its template. This one should work better :
...
<Expander.Template>
<ControlTemplate
TargetType="Expander">
<Border
BorderThickness="1">
<Expander Content="{TemplateBinding Content}" Header="{TemplateBinding Header}"/>
</Border>
</ControlTemplate>
</Expander.Template>
...
Personally I think a TreeView control would give you a much better base to work from, especially if you're using Expression Blend as a basis to create new/blank Templates from for items. Seeing the default Templates is extremely enlightening and gives you much more fine-grained control and better understanding and insight into how things work by default. Then you can go to town on them. It also looks like you're working with Hierchical Data and TreeViews inherently lend themselves well to working with such data.