I am using MahApps Metro anf this is my Button:
<Button
Name="startBtn"
Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}"
Click="playBtn_Click">
<Rectangle
Width="25"
Height="25">
<Rectangle.Fill>
<ImageBrush
ImageSource="pack://application:,,,/Resources/start.ico" />
</Rectangle.Fill>
</Rectangle>
</Button>
So all i want is change the Button image inside my Button Click Event:
private void startBtn_Click(object sender, RoutedEventArgs e)
{
}
XAML:
<Button
Name="startBtn"
Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}"
Click="playBtn_Click">
<Image Width="25" Height="25" Source="pack://application:,,,/Resources/start.ico" />
</Button>
Code:
private void startBtn_Click(object sender, RoutedEventArgs e)
{
((sender as Button).Content as Image).Source = new BitmapImage(new Uri("yourpath.png"));
}
I have two buttons inside a stack panel. Initially B1 button is on top, then B2. I will change button visibility dynamically from code so that, when I change B1 visibility hidden, then B2 will come on top. How can I achieve this functionality.
<Grid>
<StackPanel >
<Button Content="B1" Height="20" Width="100" Visibility="Visible"/>
<Button Content="B2" Height="20" Width="100" Visibility="Visible"/>
</StackPanel>
</Grid>
First you remove the Statckpanel and put then in a Grid and you can achieve
Try something like this.
<Grid>
<Button Content="B1" Height="20" Width="100" Visibility="Visible" Click="Button_Click" x:Name="B1" />
<Button Content="B2" Height="20" Width="100" Visibility="Visible" x:Name="B2" Click="B2_Click" />
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
B1.Visibility = System.Windows.Visibility.Hidden;
B2.Visibility = System.Windows.Visibility.Visible;
}
private void B2_Click(object sender, RoutedEventArgs e)
{
B2.Visibility = System.Windows.Visibility.Hidden;
B1.Visibility = System.Windows.Visibility.Visible;
}
This should give you similar behaviour. Change according to your use
I am making a text editor program in WPF and I need to make a Plain button, which it's purpose is to remove the formatting (bold, italic, font such as Arial, font size) of text of the RichTextBox.
This is my code so far:
<Window x:Class="TextEditor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TextEditor"
Title="Text Editor" Height="480" Width="640">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File" Name="Menu">
<MenuItem Header="New" Name="New"
Click="New_Click" />
<MenuItem Header="Save" Name="Save"
Click="Save_Click" />
</MenuItem>
</Menu>
<DockPanel DockPanel.Dock="Top">
<ToolBar>
<ToggleButton x:Name="boldButton"
ToolTip="Bold"
Command="{x:Static EditingCommands.ToggleBold}" CommandTarget="{Binding ElementName=_richTextBox}">
<Image Source="Icons/text_bold.png"
Height="25"
Width="25"/>
</ToggleButton>
<ToggleButton x:Name="italicButton"
ToolTip="Italic"
Command="{x:Static EditingCommands.ToggleItalic}" CommandTarget="{Binding ElementName=_richTextBox}">
<Image Source="Icons/text_italic.png"
Height="25"
Width="25"/>
</ToggleButton>
<ToggleButton x:Name="PlainButton"
ToolTip="Make the text plain"
Click="PlainButton_Click">
PlainText
</ToggleButton>
<Button x:Name="BackgroundButton"
ToolTip="Change the background of the textbox"
Click="BackgroundButton_Click">
Change the background
</Button>
<Separator/>
<ComboBox x:Name="fonts"
MinWidth="100"
DataContext="{x:Static Fonts.SystemFontFamilies}"
ItemsSource="{Binding}"
ToolTip="Font"
SelectionChanged="Font_SelectionChanged"/>
<ComboBox x:Name="fontSize"
MinWidth="40"
ToolTip="Font Size"
>
</ComboBox>
</ToolBar>
</DockPanel>
<StatusBar DockPanel.Dock="Bottom">
<TextBlock x:Name="status"/>
</StatusBar>
<RichTextBox x:Name="body"
FontSize="{Binding ElementName=fontSize, Path=SelectedItem}"
SpellCheck.IsEnabled="True"
AcceptsReturn="True"
AcceptsTab="True"
SelectionChanged="body_SelectionChanged"
BorderThickness="0 2 0 0"/>
</DockPanel>
</Window>
C sharp code:
public MainWindow()
{
InitializeComponent();
for (double i = 8; i <= 48; i += 2)
{
fontSize.Items.Add(i);
}
}
private void body_SelectionChanged(object sender, RoutedEventArgs e)
{
object temp = body.Selection.GetPropertyValue(Inline.FontFamilyProperty);
fonts.SelectedItem = temp;
}
private void New_Click(object sender, RoutedEventArgs e)
{
body.Document.Blocks.Clear();
}
private void Save_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "Text file|*.txt";
sfd.FileName = "Untitled document";
if (sfd.ShowDialog() == true)
{
FileStream fileStream = new FileStream(sfd.FileName, FileMode.Create);
TextRange range = new TextRange(body.Document.ContentStart, body.Document.ContentEnd);
range.Save(fileStream, DataFormats.Text);
}
}
private void Font_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (fonts.SelectedItem != null)
body.Selection.ApplyPropertyValue(Inline.FontFamilyProperty, fonts.SelectedItem);
}
private void PlainButton_Click(object sender, RoutedEventArgs e)
{
//the code of the plain button
}
private void BackgroundButton_Click(object sender, RoutedEventArgs e)
{
body.Background = Brushes.Yellow;
}
It's a solution from 2009 ... I don't know if the richtext API in .NET has improved, but this post seems to have a solution for what you need.
Use the following code for WPF, if you are still looking for answers.
myRichTextBox.SelectAll();
myRichTextBox.Selection.ClearAllProperties();
i am working on wpf window that show list of items next each other with wrapping, i have tried to use WrapPanel in this way:
<Grid>
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Button Content="01" Height="30" Width="70"/>
<Button Content="02" Height="35" Width="72"/>
<Button Content="03" Height="20" Width="74"/>
<Button Content="04" Height="25" Width="76"/>
<Button Content="05" Height="18" Width="78"/>
<Button Content="06" Height="50" Width="70"/>
<Button Content="07" Height="40" Width="72"/>
<Button Content="08" Height="55" Width="74"/>
<Button Content="09" Height="45" Width="76"/>
<Button Content="10" Height="25" Width="78"/>
<Button Content="11" Height="20" Width="80"/>
<Button Content="12" Height="30" Width="70"/>
<Button Content="13" Height="45" Width="72"/>
<Button Content="14" Height="30" Width="74"/>
<Button Content="15" Height="20" Width="76"/>
<Button Content="16" Height="25" Width="78"/>
<Button Content="17" Height="35" Width="80"/>
<Button Content="18" Height="50" Width="70"/>
<Button Content="19" Height="55" Width="72"/>
<Button Content="20" Height="45" Width="74"/>
<Button Content="21" Height="20" Width="76"/>
<Button Content="22" Height="60" Width="78"/>
<Button Content="23" Height="20" Width="80"/>
<Button Content="24" Height="25" Width="70"/>
<Button Content="25" Height="30" Width="72"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
and this is the result:
Actually this result is unsatisfactory for me because if you imagine the WrapPanel as grid(rows and columns) you will find that there is no columns, but there are fixed size rows. i need to make WarpPanel or some control else without columns too, look at this imaginary image:
notice that there is no rows and no columns. this is what i wanna make.
anybody have ideas to solve this issue?
You could write your own custom Panel class. There are some tutorials on the web, simply google "wpf custom panel".
It boils down to overriding the MeasureOverride and ArrangeOverride methods.
public class CustomPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
Size panelDesiredSize = new Size();
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
// Use child.DesiredSize, availableSize.Width and the positions
// and sizes of the previous children to calculate the position of
// the current child. Then determine the resulting Panel height.
panelDesiredSize = ...
}
return panelDesiredSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
foreach (UIElement child in InternalChildren)
{
// Arrange each child according to the position calculations
// done in MeasureOverride
Point position = ...
child.Arrange(new Rect(position, child.DesiredSize));
}
return finalSize;
}
}
UPDATE: The following simple custom Panel might more or less do what you want.
public class PackPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
}
var positions = new Point[InternalChildren.Count];
var desiredHeight = ArrangeChildren(positions, availableSize.Width);
return new Size(availableSize.Width, desiredHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
var positions = new Point[InternalChildren.Count];
ArrangeChildren(positions, finalSize.Width);
for (int i = 0; i < InternalChildren.Count; i++)
{
var child = InternalChildren[i];
child.Arrange(new Rect(positions[i], child.DesiredSize));
}
return finalSize;
}
private double ArrangeChildren(Point[] positions, double availableWidth)
{
var lastRowStartIndex = -1;
var lastRowEndIndex = 0;
var currentWidth = 0d;
var desiredHeight = 0d;
for (int childIndex = 0; childIndex < InternalChildren.Count; childIndex++)
{
var child = InternalChildren[childIndex];
var x = 0d;
var y = 0d;
if (currentWidth == 0d || currentWidth + child.DesiredSize.Width <= availableWidth)
{
x = currentWidth;
currentWidth += child.DesiredSize.Width;
}
else
{
currentWidth = child.DesiredSize.Width;
lastRowStartIndex = lastRowEndIndex;
lastRowEndIndex = childIndex;
}
if (lastRowStartIndex >= 0)
{
int i = lastRowStartIndex;
while (i < lastRowEndIndex - 1 && positions[i + 1].X < x)
{
i++;
}
while (i < lastRowEndIndex && positions[i].X < x + child.DesiredSize.Width)
{
y = Math.Max(y, positions[i].Y + InternalChildren[i].DesiredSize.Height);
i++;
}
}
positions[childIndex] = new Point(x, y);
desiredHeight = Math.Max(desiredHeight, y + child.DesiredSize.Height);
}
return desiredHeight;
}
}
You Can Either use Canvas:
Or Use Grid and set the Margin of each Buttons according to requirenment
<Canvas >
<Button Content="s" Width="50" Canvas.Left="17" Canvas.Top="20" />
<Button Canvas.Left="73" Canvas.Top="32" Content="s" Width="60" Height="42" />
<Button Canvas.Left="139" Canvas.Top="10" Content="s" Height="42" Width="60" />
</Canvas>
<Grid >
<Button Content="01" Height="30" Width="70" Margin="20,12,414,268" />
<Button Content="02" Height="35" Width="72" Margin="426,148,6,128" />
<Button Content="03" Height="20" Width="74" Margin="190,122,240,170" />
<Button Content="04" Height="25" Width="76" Margin="386,26,40,260" />
<Button Content="05" Height="18" Width="78" Margin="376,202,48,92" />
<Button Content="06" Height="50" Width="70" Margin="385,64,48,196" />
<Button Content="07" Height="40" Width="72" Margin="162,202,269,68" />
<Button Content="08" Height="55" Width="74" Margin="20,154,408,102" />
<Button Content="09" Height="45" Width="76" Margin="21,95,406,171" />
<Button Content="10" Height="25" Width="78" Margin="44,47,382,239" />
<Button Content="11" Height="20" Width="80" Margin="386,120,38,170" />
<Button Content="12" Height="30" Width="70" Margin="95,13,338,268" />
<Button Content="13" Height="45" Width="72" Margin="290,6,140,260" />
<Button Content="14" Height="30" Width="74" Margin="210,38,220,244" />
<Button Content="15" Height="20" Width="76" Margin="128,48,299,242" />
<Button Content="16" Height="25" Width="78" Margin="265,189,160,97" />
<Button Content="17" Height="35" Width="80" Margin="176,154,246,122" />
<Button Content="18" Height="50" Width="70" Margin="100,146,333,116" />
<Button Content="19" Height="55" Width="72" Margin="270,121,160,135" />
<Button Content="20" Height="45" Width="74" Margin="348,148,81,118" />
<Button Content="21" Height="20" Width="76" Margin="94,78,332,212" />
<Button Content="22" Height="60" Width="78" Margin="270,60,155,192" />
<Button Content="23" Height="20" Width="80" Margin="176,74,247,216" />
<Button Content="24" Height="25" Width="70" Margin="194,95,238,191" />
<Button Content="25" Height="30" Width="72" Margin="117,104,314,177" />
</Grid>
I'm creating a Toolbar with some buttons, and I want each button to execute an different command according to the ViewModel attached to it's DataContext, so I created if like this:
public readonly DependencyProperty NewCommandProperty = DependencyProperty.Register(
"NewCommand", typeof(ICommand),
typeof(VirtueGridToolbar));
public ICommand NewCommand
{
get
{
return (ICommand)GetValue(NewCommandProperty);
}
set
{
SetValue(NewCommandProperty, value);
}
}
public GridToolbar()
{
InitializeComponent();
}
and the xaml of the control is this:
<UserControl x:Class="Virtue.Modules.Library.Controls.GridToolbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ToolBar Background="Transparent">
<ToolBar.Items>
<Button x:Name="NewButton"
Width="25"
Height="25"
ToolTip="Novo"
Command="{Binding NewCommand}">
<Image Source="{DynamicResource NewLarge}" />
</Button>
<Button x:Name="EditButton"
Width="25"
Height="25"
ToolTip="Editar">
<Image Source="{DynamicResource EditLarge}" />
</Button>
<Button x:Name="DeleteButton"
Width="25"
Height="25"
ToolTip="Excluir">
<Image Source="{DynamicResource DeleteLarge}" />
</Button>
<Separator />
<Button x:Name="SaveButton"
Width="25"
Height="25"
ToolTip="Excluir">
<Image Source="{DynamicResource SaveLarge}" />
</Button>
</ToolBar.Items>
</ToolBar>
</UserControl>
But when I add the UserControl to another control and attribute the Command
<V:GridToolbar NewCommand="{Binding Path=New}" />
the command does not execute.
Any suggestions?
Tks,
Diego