Draw samurai sudoku grid on WPF

Question

I want to draw a samurai sudoku grid on my C# WPF project. this is the example of samurai sudoku

for each TextBox within the grid, I want to load it with dynamic value from the txt file.

txt file: "23987239847239847" (in total 405 integers)

I already have the normal sudoku grid working

code:

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="{Binding Dimension}" Columns="{Binding Dimension}" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Text="{Binding Value, Mode=TwoWay}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

What are the most efficient ways to draw a grid that looks like a samurai suoku grid?

Answer 1

Example for demonstration. It is not as difficult as in the picture in the question. But it will not be a problem for you to supplement it.

public class SudokuCell
{
    public Thickness Border { get; }
    public int Value { get; set; }

    public int Row { get; }
    public int Column { get; }

    public SudokuCell(int row, int column, Thickness border)
    {
        Row = row;
        Column = column;
        Border = border;
    }

    public SudokuCell(int row, int column, Thickness border, int value)
        : this(row, column, border)
    {
        Value = value;
    }
}

public class SudokuViewModel
{
    public ObservableCollection<SudokuCell> Cells { get; }
        = new ObservableCollection<SudokuCell>();

    public IEnumerable<int> ValidValues { get; } = Enumerable.Range(1, 9);

    private readonly SudokuCell[,] cellsArray;

    private static readonly Random random = new Random();
    public SudokuViewModel()
    {
        cellsArray = new SudokuCell[9, 9];
        for (int row = 0; row < 9; row++)
        {
            for (int column = 0; column < 9; column++)
            {
                if ((row / 3 + column / 3) % 2 == 1)
                    continue;

                double left = 0.5;
                if (column % 3 == 0)
                    left = 3;

                double top = 0.5;
                if (row % 3 == 0)
                    top = 3;

                double right = 0.5;
                if (column % 3 == 2)
                    right = 3;

                double bottom = 0.5;
                if (row % 3 == 2)
                    bottom = 3;

                int value = 0;
                if (random.Next(5) < 2)
                    value = random.Next(9) + 1;

                cellsArray[row, column] = new SudokuCell(
                    row,
                    column,
                    new Thickness(left, top, right, bottom),
                    value);
            }
        }

        foreach (var cell in cellsArray)
        {
            Cells.Add(cell);
        }
    }
}

    <Window.Resources>
        <local:SudokuViewModel x:Key="viewModel"/>
        <ItemsPanelTemplate x:Key="Sudoku.Panel">
            <UniformGrid Columns="9" Rows="9"/>
        </ItemsPanelTemplate>
        <DataTemplate x:Key="Sudoku.CellTemplate" DataType="{x:Type local:SudokuCell}">
            <Border BorderBrush="SkyBlue" BorderThickness="{Binding Border}"
                    Background="{Binding Background, ElementName=comboBox}">
                <Border.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding}" Value="{x:Null}">
                                <Setter Property="Border.Opacity" Value="0"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <ComboBox x:Name="comboBox" ItemsSource="{Binding ValidValues, Source={StaticResource viewModel}}"
                          SelectedItem="{Binding Value}"
                          FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"
                          BorderThickness="0"/>
                </Border>
        </DataTemplate>
    </Window.Resources>

    <ItemsControl ItemsSource="{Binding Cells, Source={StaticResource viewModel}}"
                  ItemTemplate="{DynamicResource Sudoku.CellTemplate}"
                  ItemsPanel="{DynamicResource Sudoku.Panel}"/>