Changing the content image of a button makes it ignore any previously defined layout properties.
What I suspect is the fact that upon changing this.Content in the Button click event, it modifies:
<Button>
Everything found between these tags.
</Button>
And as my Style is inside those tags, it overrides it.
Here is the code for record:
private void ChangeImageFile(object sender, RoutedEventArgs e)
{
OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "Image Files|*.png;*.jpeg;*.tiff;*.gif;*.bmp;*.jpg";
ofd.FilterIndex = 1;
ofd.Multiselect = false;
bool? ok = ofd.ShowDialog();
if(ok == true)
{
Image loaded = new Image();
loaded.Source = new BitmapImage(new Uri(ofd.FileName));
loaded.Height = 100;
this.Content = loaded;
}
}
<Button x:Name="BookCover" Click="ChangeImageFile">
<Button.Content>
<Image Source="Images/NewBook.png"/>
</Button.Content>
<Button.Style>
<Style TargetType="{x:Type Button}">
... LONG STYLE ...
</Style>
</Button.Style>
</Button>
When you're using this.Content, this refers to the current window and not to the button. You either need to access the button by Name or cast the sender.
By Name:
BookCover.Content = loaded;
Cast the sender:
Button btn = (sender as Button);
if(btn != null)
btn.Content = loaded;
Related
I added a logout button to the FlyoutFooter of the shell. After clicking it, it takes a certain waiting time to connect to the server, so I need to add an ActivityIndicator in the flyout.
<Shell.FlyoutFooter>
<Grid>
<Button Text="Logout"
Clicked="Button_Clicked"/>
</Grid>
</Shell.FlyoutFooter>
How can I add it there?
You can use FlyoutContent property:
<Shell.FlyoutFooter>
<Grid>
<Button Text="Logout"
Clicked="Button_Clicked"/>
</Grid>
</Shell.FlyoutFooter>
private async void Button_Clicked(object sender, EventArgs e)
{
var grid = new Grid();
grid.Children.Add(new ActivityIndicator()
{
IsRunning = true,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
});
Current.FlyoutContent = grid;
await Task.Delay(5000);
FlyoutContent = null;
}
I am currently working in Windows 10 and I am working on AppBar and Command Bar controls. I created an Appbar inside which I added a commandBar which contains and app bar button. Now the issue is it is showing more icon for both commandBar and AppBar. Can you please suggest how can I remove this?
My Code is below
CommandBar commandBar = new CommandBar();
if (this.BottomAppBar == null)
{
this.BottomAppBar = new AppBar();
this.BottomAppBar.IsOpen = true;
this.BottomAppBar.IsSticky = true;
}
commandBar.PrimaryCommands.Clear();
commandBar.IsSticky = true;
commandBar.IsOpen = true;
commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;
commandBar.PrimaryCommands.Add(appBarButton);
this.BottomAppBar.Content=commandBar;
The above is generating following output
What I actually want is left side bar that is commandBar, not the gray portion. Can someone suggest what I am doing wrong? I also tried just adding CommmandBar inside grid but it didn't display at all.
Update
CommandBar commandBar=new CommmandBar();
commandBar.IsOpen=true;
commandBar.IsSticky=true;
commandBar.ClosedDisplayMode=AppBarClosedDisplatMode.Compact;
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;
commandBar.PrimaryCommands.Add(appBarButton);
pageLayoutRootGrid.Children.Add(commandBar);
I also tried adding a StackPanel in AppBar as below but not giving proper results.
if (this.BottomAppBar == null)
{
this.BottomAppBar = new AppBar();
this.BottomAppBar.IsOpen = true;
this.BottomAppBar.IsSticky = true;
}
StackPanel appBarPanel=new StackPanel();
appBarPanel.Orientation=Orientation.Horizontal;
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;
appBarPanel.Children.Add(appBarButton);
this.BottomAppBar.Content=appBarPanel;
For xaml:
<Page.BottomAppBar>
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Accept"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
this line make your UI messed:
this.BottomAppBar = new AppBar();
as you can see from my xaml, create only 1 CommandBar inside BottomAppBar
Edit: if you want to use code, use this:
var commandBar = new CommandBar();
commandBar.PrimaryCommands.Add(new AppBarButton() { Label = "test" });
commandBar.VerticalAlignment = VerticalAlignment.Bottom;
this.root.Children.Add(commandBar);
UPDATE
Full xaml code:
<Page
x:Class="CommandBarSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CommandBarSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="root">
</Grid>
</Page>
The code behind:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
var commandBar = new CommandBar();
commandBar.VerticalAlignment = VerticalAlignment.Bottom;
var appBarButton = new AppBarButton() { Icon = new SymbolIcon(Symbol.Accept), Label = "Accept" };
commandBar.PrimaryCommands.Add(appBarButton);
root.Children.Add(commandBar);
}
}
I am using Mahapps for layout and AvalonDock for tabs and sub-windows layout. But unable to use drag drop functionality as the drag drop function never called. I have also set both(explorer and .exe) privileges to user according to link, but all in vain. Unable to get this thing work. Background of avalondock:DockingManager control is set to "#FF2D2D30". On dragging or dropping file from file explorer on dockingManager, nothing happens.
<avalonDock:DockingManager AllowDrop="True" x:Name="dockingManager" DockPanel.Dock="Right" Theme="{Binding AvalonDockTheme}" PreviewDragEnter="DragFilesEntered" PreviewDrop="FilesDropped" PreviewDragOver="DragFilesEntered">
<avalonDock:LayoutRoot>
<avalonDock:LayoutPanel Orientation="Horizontal">
<avalonDock:LayoutDocumentPaneGroup>
<avalonDock:LayoutDocumentPane x:Name="layoutdoc_tabContent">
</avalonDock:LayoutDocumentPane>
</avalonDock:LayoutDocumentPaneGroup>
</avalonDock:LayoutPanel>
</avalonDock:LayoutRoot>
</avalonDock:DockingManager>
Code Behind(C#) which i picked from some website
private void DragFilesEntered(object sender, DragEventArgs e)
{
MessageBox.Show("Hey");
bool isValidFile = false;
if (e.Data.GetDataPresent(DataFormats.FileDrop, true))
{
string[] filenames = (string[])e.Data.GetData(DataFormats.FileDrop, true);
foreach (string filename in filenames)
{
if (File.Exists(filename) == false)
{
isValidFile = false;
break;
}
FileInfo info = new FileInfo(filename);
if (!(info.Extension == ".bmp" || info.Extension == ".png" || info.Extension == ".jpg"))
{
isValidFile = false;
break;
}
}
}
if (isValidFile)
e.Effects = DragDropEffects.Move;
else
e.Effects = DragDropEffects.None;
}
private void FilesDropped(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(DataFormats.FileDrop, true))
{
string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
foreach(var file in files)
((MainViewModel)this.DataContext).CreateTab(layoutdoc_tabContent, file);
e.Handled = true;
}
}
EDIT:
<StackPanel PreviewDragEnter="DragFilesEntered" PreviewDrop="FilesDropped" PreviewDragOver="DragFilesEntered" AllowDrop="True" Width="100" Height="100" Orientation="Horizontal" Background="#FFDA1313">
</StackPanel>
Still not working.Unable to call Drag function.
Try to put the AllowDrop="True" and the associated handlers directly on the LayoutDocumentPane.
In general, in XAML, you have to put theses on the overred FrameworkElement by the cursor when dropping.
I have this longListSelector:
<phone:LongListSelector
x:Name="ListaMensajesTablon"
ItemsSource="{Binding Mensajes}"
ItemTemplate="{StaticResource MensajesTablonDataTemplate}"
SelectionChanged="MensajeTablonSelected"/>
With this ItemTemplate:
<DataTemplate x:Key="MensajesTablonDataTemplate">
<Grid>
<Button MaxHeight="85" MaxWidth="95" MinHeight="85" MinWidth="95" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Button_Click" BorderBrush="Transparent">
<Button.Content>
<Image x:Name="imagenFav" MaxHeight="75" MaxWidth="75" MinHeight="75" MinWidth="75"
Source="{Binding userFav, Converter={StaticResource BoolToHeart}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
</DataTemplate>
This code-behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
botonFavPulsado = true;
botonAmor = (Button)sender;
}
private void MensajeTablonSelected(object sender, SelectionChangedEventArgs e)
{
if(botonFavPulsado)
{
var myItem = ((LongListSelector)sender).SelectedItem as MensajeTablon;
if(botonAmor!=null)
{
if (myItem.userFav)
{
botonAmor.Content = new Image
{
Source = new BitmapImage(new Uri("icons/heart.red.png", UriKind.Relative))
};
}
else
{
botonAmor.Content = new Image
{
Source = new BitmapImage(new Uri("icons/heart.white.png", UriKind.Relative))
};
}
}
botonFavPulsado = false;
}
}
I want to do is that when you press a button that is inside an element of LongListSelector change the picture . The first time I press the button enters in the function Button_Click and then enters in the function MensajeTablonSelected function and change the image (good). The problem is the second time I press the same button is entering in the function Button_Click function and does not enter in the function MensajeTablonSelected
Resume : ToggleButton in LongItemSelector working the first time but not the second one
Problem solved:
private void MensajeTablonSelected(object sender, SelectionChangedEventArgs e)
{
if (((LongListSelector)sender).SelectedItem != null)
if(botonFavPulsado)
{
var myItem = ((LongListSelector)sender).SelectedItem as MensajeTablon;
if(botonAmor!=null)
{
if (myItem.userFav)
{
botonAmor.Content = new Image
{
Source = new BitmapImage(new Uri("icons/heart.red.png", UriKind.Relative))
};
}
else
{
botonAmor.Content = new Image
{
Source = new BitmapImage(new Uri("icons/heart.white.png", UriKind.Relative))
};
}
}
botonFavPulsado = false;
//Unselect ITEM
((LongListSelector)sender).SelectedItem = null;
}
}
This solution have a problem, the function MensajeTablonSelected is called again.
This is an attempt to implement a read-only Linux text file (one byte newline sequence) viewer for Windows.
It presently has a ScrollViewer that will not resize when the WPF MainWindow is resized. How do I make the ScrollViewer size subservient to the MainWindow?
private void ScrollViewer1GotFocus(object sender, RoutedEventArgs e)
{
Microsoft.Win32.OpenFileDialog dlg =
new Microsoft.Win32.OpenFileDialog();
dlg.FileName = "Document";
dlg.DefaultExt = ".txt";
dlg.Filter = null;
Nullable<bool> result = dlg.ShowDialog();
if (result == true)
{
string filename = dlg.FileName;
StreamReader streamReader = new StreamReader(filename,
System.Text.Encoding.ASCII);
string text = streamReader.ReadToEnd();
FlowDocument flowDocument = new FlowDocument();
flowDocument.TextAlignment = TextAlignment.Left;
flowDocument.FontFamily = new FontFamily("Lucida Console");
Paragraph paragraph = new Paragraph();
paragraph.Inlines.Add(text);
flowDocument.Blocks.Add(paragraph);
FlowDocumentScrollViewer fdsv = new FlowDocumentScrollViewer();
fdsv.Document = flowDocument;
ScrollViewer1.Content = fdsv;
}
}
private void MainWindow1SizeChanged(object sender, SizeChangedEventArgs e)
{
}
The XAML:
<Window x:Name="MainWindow1" x:Class="ReadOnlyViewLinux1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ReadOnlyView" Height="256" Width="512" SizeChanged="MainWindow1SizeChanged">
<ScrollViewer x:Name="ScrollViewer1" HorizontalAlignment="Left" Height="236" Margin="10,10,0,-21" VerticalAlignment="Top" Width="492" GotFocus="ScrollViewer1GotFocus"/>
Simply Leave the ScrollViewer with no Height, Width, or Margin properties:
<Window>
<ScrollViewer/>
</Window>