Changing Dragablz header color? - c#

What I'm trying to achieve here is to change the white of the header text. (Dialogs, Mahapps, Palette) to something else and also the green below Dialogs. I tried changing the white to black using foreground property but that didn't do anything.
<dragablz:TabablzControl FixedHeaderCount="3" >
<TabItem Foreground="Black" Header="DIALOGS">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock>
</TabItem>
<TabItem Header="MATERIAL">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Material Design</TextBlock>
</TabItem>
<TabItem Header="PALETTE">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Looks Quite Nice</TextBlock>
</TabItem>
</dragablz:TabablzControl>

You can add your "own" TextBlock element to the Header of the TabItem, and there set the Foreground brush (and override any styles that might otherwise affect it) like this:
<TabItem>
<TabItem.Header>
<TextBlock Text="DIALOGS" Foreground="Black" />
</TabItem.Header>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock>
</TabItem>

Related

Why does the application look different after launching than in designer?

I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>

How do you access controls when using <TabItem.Header>, in code behind?

Going off this sample from the MSDN under TabControl:
<TabControl>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Fill="DarkGray"/>
<TextBlock>Tab 1</TextBlock>
</StackPanel>
</TabItem.Header>
<StackPanel>
<TextBlock>Enter some text</TextBlock>
<TextBox Name="textBox1" Width="50"/>
</StackPanel>
</TabItem>
<TabItem Header="Tab 2">
<!--Bind TextBlock.Text to the TextBox on the first
TabItem.-->
<TextBlock Text="{Binding ElementName=textBox1, Path=Text}"/>
</TabItem>
</TabControl>
How do you access the stackpanel (and it's children) that is inside the <TabItem.Header> tag from C# code behind? When I try to use .Header intellisense treats it as if the header was defined the way the 2nd tab above is.
I agree with HighCore. You should be using databinding instead of trying to manipulate the UI elements directly. In the off chance that you want to stick with your current plan, here's how:
<TabControl>
<TabItem>
<TabItem.Header>
<StackPanel Name="tab1StackPanel" Orientation="Horizontal">
...
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Header="Tab 2">
...
</TabItem>
</TabControl>
Now, from code behind you can reference tab1StackPanel directly, as defining a Name exposes it to codebehind WPF (as long as it's not inside a template).
You could also use the VisualTreeHelper to find visual children of the first tab...
BUT... once again, you should probably be using databinding, so I'd make sure you're following a good pattern before going too much further.
I don't know if it works but you can give it a try:
(tabItem.Header as ContentControl).FindName("NAME_OF_TEXTBLOCK");

Text wrapping in pivot header

I am looking for a correct way to enable text wrapping in the header of Pivot control in my WP8 application.
Here is the code:
<phone:Pivot Title="MY APPLICATION">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="very long item name">
<Grid/>
</phone:PivotItem>
</phone:Pivot>
As you can see the 'TextWrapping' property is explicitly set to 'Wrap', but I do not observe any wrapping whatsoever. Does anyone know the workaround?
You need to set the Width of TextBlock explicitly for TextWrapping to work.
<TextBlock Text="{Binding}" TextWrapping="Wrap" MaxWidth="400" Height="Auto"/>
Above works fine.

Text longlistselector not completely visible

I have a little problem using the longlistselector (well more specifically the multilonglistselector) in windows phone 8.
I use binding to bind the name of an object to the items, the XAML code is as follow:
<Grid>
<TextBox x:Name="searchBox"
IsEnabled="{Binding IsConnected}"
HorizontalAlignment="Left" KeyUp="CheckKey"
Height="72" Margin="10,10,0,0" TextWrapping="Wrap" InputScope="Search" GotFocus="Select"/>
<toolkit:LongListMultiSelector EnforceIsSelectionEnabled="True" SelectionChanged="AdjustAddSelectionButton" x:Name="resultList" ItemsSource="{Binding Results}" HorizontalAlignment="Stretch" Height="434" Margin="10,87,0,0" VerticalAlignment="Top" >
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="OpenArticleDetail" />
</toolkit:GestureService.GestureListener>
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
The Binding takes place perfectly, but the text is sometimes too long and doesn't fit the screen. How would I go about wrapping this text to another line?, I 'll give a screenshot here
You didn't really state any specific problem or question you want answered. Please try to be a bit more clear in the future.
If you don't like that the TextBlock cuts off words that it can't fit, then you have several solutions.
TextBlocks have a TextWrapping property, so doing TextWrapping="Wrap" will enable the TextBlock to resize itself to display all the content.
TextBlocks have the TextTrimming property, so writing TextTrimming="WordEllipsis" will replace any cut off words with an ellipsis.
If you want to keep the one line but also show all the content, you can put the TextBlock inside a Horizontal ScrollViewer, which will let the user scroll the text left and right. Not great, but a decent solution
Code for 3.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock Text="Text"/>
</ScrollViewer>
I added a huge right padding to my main TextBlock to work around this issue.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MyTemplate">
<StackPanel VerticalAlignment="Top" Margin="0,-4,-50,0">
<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding title}" TextWrapping="Wrap" Margin="0,0,0,6"/>
<TextBlock Text="{Binding text}" TextWrapping="Wrap" FontSize="30" Padding="0,0,125,0"/>
<Rectangle HorizontalAlignment="Stretch" Height="1" Fill="#78c5a6" Margin="0,18,0,18"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>

C# - Windows Phone - MaxWidth & MaxHeight property being ignored

I have some Canvases in a ListBox. Inside these Canvases I have some TextBlocks which have their text bound to them. However when I try to use a MaxWidth/Height property on the text block (or the standard Height/Width), the properties are ignored! So I end up with the text overspilling the Canvas in cases.
I would much appreciate any help on the matter, and I hope I'm not just being a blind idiot!
Oh, and here's the code (the TextBlock I'm talking about is the first one):
<ListBox Margin="0,-9,-12,0" ItemsSource="{Binding}" Name="listBoxNotes" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="548">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas Height="175" Width="360" Background="{StaticResource PhoneAccentBrush}" toolkit:TiltEffect.IsTiltEnabled="True" Name="canvasNote" Tap="canvasNote_Tap">
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="26" Foreground="White" Canvas.Left="10" Canvas.Top="5" x:Name="Title" Width="100" MaxWidth="100"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Width="352" FontSize="24" Foreground="White" Canvas.Left="10" Canvas.Top="35" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem with this is Canvas does not limit the size of their children, and especially theTextBlock control will grow as much as it needs.
Many ways to solve your problem :
Do not use TextBlock but a TextBox
Do not use Canvas but another container such as Border, Grid, StackPanel...
Try to clip the TextBlock content
<TextBlock.Clip>
<RectangleGeometry Rect="0, 0, 50, 30"/>
</TextBlock.Clip>

Categories