Change the style of content dialog button in windows phone universal application - c#

I have this content dialog box defined inside my xaml:
<ContentDialog x:Name="AlertMessage" Background="#363636" IsSecondaryButtonEnabled="True" SecondaryButtonText="Cancel" IsPrimaryButtonEnabled="True" PrimaryButtonText="Ok" >
<ContentDialog.Content>
<StackPanel Name="rootStackPanel" Height="Auto" >
<StackPanel Margin="0">
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock x:Name="HeadingText" x:FieldModifier="public" Style="{StaticResource ApplicationMessageBoxHeadingStyle}" Text="Alert" />
<Image Margin="10,05,0,0" Source="/Assets/Images/alert.png" Width="35"></Image>
</StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Are you sure you want to log off ?" />
</StackPanel>
</StackPanel>
</ContentDialog.Content>
</ContentDialog>
And I'm calling it like this:
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
MessageBox();
}
private async void MessageBox()
{
ContentDialogResult LogoutDialog = await AlertMessage.ShowAsync();
if (LogoutDialog == ContentDialogResult.Primary)
{
this.Frame.Navigate(typeof(MainPage));
}
else
{
// User pressed Cancel or the back arrow.
// Terms of use were not accepted.
}
}
Problem: is that my app have a style for all the buttons in my applications. And I want to apply same styles to the primary and secondary buttons of that dialog box too. And I am unable to figure out how to Achieve this. Is it possible to apply styles to these buttons?

I used this code to change Button color on my UWP app.
var cd = new ContentDialog();
cd.Content = "Remove file ?";
cd.Title = "Remove file";
cd.PrimaryButtonText = "OK";
cd.SecondaryButtonText = "Cancel";
var bst = new Windows.UI.Xaml.Style(typeof(Button));
bst.Setters.Add(new Setter(Button.BackgroundProperty, Colors.Red));
bst.Setters.Add(new Setter(Button.ForegroundProperty, Colors.White));
cd.PrimaryButtonStyle = bst;
var ress = await cd.ShowAsync();

You can indirectly customize the buttons.
The ContentDialog's buttons use the "default" style for the target type "Button". You can overwrite the ContentDialog Style of the SDK and add a different Button Style in the Setter of the Template. This button style will just be valid in the scope of the ContentDialog control.
In this example the new button style needs to be put in the first border element (x:Name="Container")
<Border.Resources>
<Style TargetType="Button" BasedOn="{StaticResource YourNormalButtonStyle}">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Foreground" Value="Red"/>
</Style>
</Border.Resources>

If you want to change the ContendDialog PrimaryButtonSettings you need inside ContenDialog.Resources just to set a Style that you are targeting Buttons and the Setter of With Property="" and Value="" and that should fix below is one example.
Converter={StaticResource StringEmptyToBoolConverter}}"
<ContentDialog.Resources>
<converters:StringEmptyToBoolConverter x:Key="StringEmptyToBoolConverter"/>
<Style TargetType="Button">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FontSize" Value="13.6"/>
<Setter Property="Width" Value="Auto"/>
</Style>
</ContentDialog.Resources>
<WebView Height="400" Width="500" DefaultBackgroundColor="Transparent" Source="{Binding State.GuideUri}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="RulesWebView"/>

The ContentDialog buttons aren't customizable, but you can leave the ContentDialog's primary and secondary buttons unset and add your own buttons within the template.

Related

Style TreeView Header. Set Header Unselectable

how can i style only the header of a tree view ?
I want to make the header unselectable.
Something like:
<TreeViewHeaderStyle>
<Setter Property="Focusable" Value="false">
</TreeViewHeaderStyle>
Thank you :)
Style the TreeViewItem in your Window's or Control's resources.
<Window.Resources>
<Style TargetType="TreeViewItem">
<Setter Property="IsEnabled" Value="False"/>
</Style>
</Window.Resources>
EDIT:
If you still need to expand via the triangle, but want a disabled header, the solution is a bit dirtier. Many solutions show a complicated restyling of the HeaderedItemsControl you can search for that or simply add a Label to each TreeViewItem and handle a mouse down event. In the below example I wrapped a Label inside a grid so that I could style the label as needed. When the Grid is clicked the event is handled preventing expansion. If you are only setting the Label content, you can just add the MouseDown event to the Label and ditch the Grid.
<TreeViewItem>
<TreeViewItem.Header>
<Grid MouseDown="Grid_MouseDown">
<Label Content="TEST" IsEnabled="False" />
</Grid>
</TreeViewItem.Header>
<Button Content="Random SubItem"/>
</TreeViewItem>
CODE BEHIND:
private void Grid_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
e.Handled = true;
}

Colour multiple textboxes with one method wpf

I have a method that is supposed to color the background of a textbox that is on focus(Enter)
private void onEnter_ColourChange(object sender, EventArgs e)
{
this.BackColor = Color.White;
}
This doesn't work, however. I checked this answer, but I just got a NullReferenceException.
Essentially, I would like to color multiple textboxes when the textbox is in focus, with one method. Is there a way to do this?
First of all: TextBox has only the property Background and not BackColor!
If you want to change the color of the focused TextBox, a simple way is, to use a Style with a Trigger.
<Window.Resources>
<Style TargetType="TextBox" x:Key="TextBoxFocusBackgroundStyle" BasedOn="{StaticResource {x:Type TextBox}}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true" >
<Setter Property="Background" Value="Brown" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
As you can see, the Trigger watches on the property IsFocused. If the TextBox got the Focus (so IsFocused changes to true), the Background will be brown.
To use this Style:
<StackPanel>
<TextBox Text="Peter" Style="{StaticResource TextBoxFocusBackgroundStyle}"/>
<TextBox Text="Laszlo" Style="{StaticResource TextBoxFocusBackgroundStyle}"/>
<TextBox Text="Julia" Style="{StaticResource TextBoxFocusBackgroundStyle}"/>
<TextBox Text="Romeo" Style="{StaticResource TextBoxFocusBackgroundStyle}"/>
</StackPanel>
If you already has a Style for the TextBoxes you should use that Style in the BasedOn attribute.

Target Only the Tab of TabItem

The Problem:
I am creating a drag/drop interface that allows for moving items within a tab as well as from one tab to another. Right now I have the following Style that allows me to target the Label within a TabItem. Because of a conflict with a ResourceDictionary, I want to add the Event through the code behind. The problem is if I add the Event to the TabItem then it triggers not only on the tab itself but the contents of the tab.
The Question:
How would I go about wiring up the event in the code behind for the following?
<Style
x:Key="DragDropTi"
BasedOn="{StaticResource {x:Type TabItem}}"
TargetType="TabItem">
<Setter
Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Label
Foreground="White"
Content="{Binding}">
<Label.Style>
<Style
TargetType="Label">
<EventSetter
Event="Drop"
Handler="TabItemDrop" />
<Setter
Property="AllowDrop"
Value="True" />
</Style>
</Label.Style>
</Label>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The answer ended up being easier than anticipated. I just had to set the MenuItem.Headeras a Label instead of a string of the name and attach the Event to the Label
Label header = new Label();
header.Content = "Tab Name";
header.AllowDrop = true;
header.Drop += new DragEventHandler(TabItemDrop);
TabItem tabItem = new TabItem();
tabItem.Header = header;

C#, Listbox Horizontal Alignment

I have a WPF app and I want to add an item with HorizontalAlignment = Left and then other with HorizontalAlignment = right, like a chat in Whatsapp, but all the text in the listbox have horizontal alignment on the right, How can I use different horizontal alignment in the same listbox.
This is my XAML code:
<ListBox x:Name="ListBoxChat" HorizontalAlignment="Stretch" Height="366" VerticalAlignment="Top" Width="270" Margin="2,44,0,0" Padding="2"/>
<TextBlock Foreground="Transparent" Name="TextB" Margin="2,-5,2,-3"></TextBlock>
and this is the C# code behind:
ListBoxChat.HorizontalAlignment = HorizontalAlignment.Left;
ListBoxChat.Items.Add("How are you ?");
ListBoxChat.HorizontalAlignment = HorizontalAlignment.Right;
ListBoxChat.Items.Add("Fine!!!");
Thank you!
You can create a single StackPanel to carry the ListView. Like this,
<StackPanel>
<ListView x:Name="chatList" Width="value" />
</StackPanel>
You don't really need the StackPanel, I just used it!
Now on the CSharp code, you can handle the events of the User or the Network. I won't go in the Depth of the process, but an example of that would be
void addItem (object sender, EventArgs e) {
// first create the new item!
ListViewItem item = new ListViewItem();
// add the properties..
item.Content = "Hi, my name is Slim Shady!";
if(messageBy == "user") {
// if message is by user, align it to right
item.HorizontalAlignment = HorizontalAlignment.Left;
} else {
// if message is by network (friend), align it to left
item.HorizontalAlignment = HorizontalAlignment.Right;
}
// now add the item to the listbox
chatList.Items.Add(item); // done! :-)
}
You can execute this code, each time there is new item to be appened! But you really need to make sure that the conditions are checked. Because using the Condition, you can change the color of the item too, like in WhatsApp, you can do other stuff too. It totally depends on the Condition, and the Way you use it.
Good luck!
You can achieve this by applying the style on your ListBoxItem and using AlternationCount and AlternationIndex as shown below:
<ListBox x:Name="ListBoxChat" HorizontalAlignment="Stretch" Height="366" VerticalAlignment="Top" Width="270" Margin="2,44,0,0" Padding="2"
AlternationCount="2">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex),
RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex),
RelativeSource={RelativeSource Self}}" Value="1">
<Setter Property="HorizontalContentAlignment" Value="Right"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

How to add Close Button in tab of Dynamic WPF Tab control

I have a WPF Tab Control..
i am adding tabs in that TabControl dynamically
Now i want to give a Close Button in every Tab of Tab Control..
So please tell me hopw to add Close button in that Tab Control..
Code for adding tab
private void AddTab(ITabbedMDI mdiChild)
{
if (_mdiChildren.ContainsKey(mdiChild.UniqueTabName))
{
//user control is already opened in tab.
//So set focus to the tab item where the control hosted
foreach (object item in tcMdi.Items)
{
TabItem ti = (TabItem)item;
if (ti.Name == mdiChild.UniqueTabName)
{
ucChildLoc = (UserControl)mdiChild;
ti.Focus();
//tcMdi.Width = this.ucChildLoc.Width;
//tcMdi.Height = this.ucChildLoc.Height;
break;
}
}
}
}
Code for Closing tab
private void CloseTab(ITabbedMDI tab, EventArgs e)
{
TabItem ti = null;
foreach(TabItem item in tcMdi.Items)
{
if (tab.UniqueTabName == ((ITabbedMDI)item.Content).UniqueTabName)
{
ti = item;
break;
}
}
if (ti != null)
{
_mdiChildren.Remove(((ITabbedMDI)ti.Content).UniqueTabName);
tcMdi.Items.Remove(ti);
}
}
I am using TabControl of this article
http://www.codeproject.com/Articles/32362/Tabbed-MDI-in-WPF
Thanks in Advance..
I have tried several solutions and struggled to find something that looked nice and also highlighted the "X" in the button when the mouse hovers. I finally ended with this one. It also does not require too much code. I hope it helps:
<TabControl>
<TabItem>
<TabItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0">Output</TextBlock>
<Button Grid.Column="1" Name="button_close" Click="button_close_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Path Data="M0,0 L8,8 M8,0 L0,8" StrokeThickness="3" VerticalAlignment="Center" Margin="5,4,0,2">
<Path.Style>
<Style TargetType="{x:Type Path}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Stroke" Value="LightGray" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</TabItem.Header>
<TabItem.Content>
</TabItem.Content>
if you make the tab control as a custom control and inherit the functionality from tab control and then add close button and handle its events then it can work
<UserControl x:Class="CloseableHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="23" d:DesignWidth="81" Margin="0">
<Grid>
<Button Content="X" Height="19" HorizontalAlignment="Right" Margin="0,3,4,0"
Name="button_close" VerticalAlignment="Top" Width="20" FontFamily="Courier"
FontWeight="Bold" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
FontStretch="Normal" Visibility="Visible"
FontSize="14" Padding="0" ToolTip="Close"/>
<Label Content="TabItem" Height="23" HorizontalAlignment="Left"
Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top"
FontFamily="Courier" FontSize="12" />
</Grid>
class ClosableTab : TabItem
{
// Constructor
public ClosableTab()
{
// Create an instance of the usercontrol
closableTabHeader = new CloseableHeader();
// Assign the usercontrol to the tab header
this.Header = closableTabHeader;
}
}
see in this article for details http://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem
this might be helpful
TabControl does not provide the ability to close TabItems.
You could add a 'x' button and set the visibility to Collapsed / Hidden as a hack.
OR You could look at XamTabControl by Infragistics or any other vendor product which does support closing of Tabs.

Categories

Resources